Update to latest lepton
This commit is contained in:
parent
f49d461aee
commit
df2e9583f0
@ -1,3 +1,3 @@
|
||||
[Info]
|
||||
Ver=v5.2.0
|
||||
Ver=v5.2.1
|
||||
Branch=photon-style
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
@use 'true' as *;
|
||||
@use "example" as *;
|
||||
@use "../src/utils/native_menu";
|
||||
|
||||
@include test-module("Native Menu Option [mix]") {
|
||||
@include test("simple") {
|
||||
@include assert {
|
||||
@include output {
|
||||
@include native_menu.NativeMenu {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
@include expect {
|
||||
@supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") {
|
||||
@include example;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="581" width="598"><path fill="context-fill" d="M119.31 4.67c8.3 3.84 14.62 10.74 20.12 17.85 5.79 7.6 10.5 16.72 10.18 26.52.11 13.73-10.19 25.95-6.85 39.91 2.4 8.15 7.85 15.85 15.61 19.64 11.61 4.99 24.78.17 34.65-6.5 10.88-10.13 21.32-20.74 32.01-31.08 16.23-16.11 54.77-54.33 58.39-56.59 5.777-3.607 10.617-3.561 15.688-3.561 5.07 0 10.489 1.121 14.199 4.201 30.528 25.345 59.773 55.87 88.113 83.51 5.29 5.77 12.78 8.94 20.19 11.03 7.94 2.2 17.16 1.16 23.51-4.43 6.81-6 11.82-14.96 10.96-24.27-1.02-11.3-7.93-21.37-7.46-32.91.16-12.86 8.13-23.84 16.48-32.93C473.33 5.74 485.61.39 498 .18c16.19-.77 32.09 4.22 46.46 11.32 11.51 5.83 22.6 13.09 31.08 22.95 10.46 12.6 17.52 27.96 20.76 43.99 2.62 13.96 2.29 29.31-5.07 41.86-7.41 12.18-20.15 21.02-34.17 23.68-9.29 1.76-18.79.98-28.09-.23-4.64-.54-9.3-1.47-13.98-1.02-8.24 1.08-16.57 4.97-21.21 12.1-4.93 7.56-4.99 17.38-2.11 25.72 1.95 5.45 4.64 10.83 8.85 14.9 16.13 14.87 32.03 29.98 47.53 45.5 12.29 12.39 24.61 24.82 35.42 38.55 2.79 4.04 6.54 8.24 6.07 13.5 0 4.57-1.32 9.07-3.57 13.03-2.35 4.42-6.42 7.5-9.72 11.16-15.31 16.04-30.68 32.04-46.02 48.05-2.65 2.56-4.71 6.07-8.37 7.28-9.29 3.52-19.45 5.39-29.34 3.73-12.15-2.09-22.31-12.2-25.01-24.14-2.8-14.08 2.99-27.98 1.99-42.09-.58-9.88-5.33-19.27-12.48-26.04-7.34-7.39-17.74-11.02-27.98-11.66-14.51-.81-28.89 3.42-41.71 9.96-21.32 10.99-38.43 29.54-48.59 51.19-5.98 13.3-9.53 28.45-6.26 42.94 3.19 15.23 14.77 28.7 29.78 33.24 9.59 3.04 19.78 2.23 29.67 1.83 10.77-.65 22.3-2.64 32.48 2.04 11.06 5.85 16.38 19.39 14.36 31.45-.99 4.96-1.62 10.64-5.61 14.2-34.92 35.7-69.81 71.44-104.69 107.18-7.25 5.84-15.59 10.57-24.56 13.18-7.08 2.2-14.36-.68-20.61-3.93-4.79-2.63-9.48-5.56-13.53-9.26-35.07-35.96-70.22-71.85-105.3-107.8-2.43-2.2-3.14-5.5-4-8.51-2.71-9.88-1.58-21.32 5.02-29.46 4.71-6.5 12.68-9.67 20.52-9.93 15.25-.57 30.61 3.04 45.77.11 14.95-2.88 27.45-14.56 32.42-28.8 3.97-11.28 3.36-23.7.18-35.09-5.79-20.27-18.43-38.25-34.37-51.87-14.47-11.94-32.15-20.6-50.96-22.49-12.12-1.25-25.08 1.11-34.83 8.76-8.7 6.98-14.85 17.47-15.5 28.72-1 13.11 4.04 25.94 2.48 39.03-1.48 13.3-12.41 25.09-25.66 27.28-9.03 1.47-18.29.01-26.88-2.93-1.85-.68-3.92-1.13-5.34-2.59-18.68-19.38-37.22-38.9-55.89-58.28-6.08-5.47-9.42-13.85-8.67-22 .81-4.38 3.81-7.93 6.33-11.47 14.03-17.49 30.15-33.14 46.03-48.93 11.71-11.26 23.39-22.55 35.38-33.51 5.95-5.26 9.45-12.81 11.27-20.42 1.61-7.47.65-15.79-3.86-22.11-6.44-8.66-18.03-12.71-28.55-11.07-12.9 1.67-26.32 3.65-39.03-.18-15.93-4.74-29.9-17.55-34-33.93-3.99-15.42-1.31-31.81 4.25-46.5 3.61-9.65 8.77-18.72 15.12-26.83 8.27-9.89 19.09-17.31 30.46-23.21 11-5.74 22.9-9.9 35.21-11.64C98.1-.6 109.42-.08 119.31 4.67z" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" style="stroke-width:.941092" d="M6.588 4.223a4.236 4.236 0 0 1 3.765-4.21v3.544l-.609-.608a.47.47 0 0 0-.665.665l1.412 1.412a.47.47 0 0 0 .665 0l1.412-1.412a.47.47 0 0 0-.666-.665l-.608.608V.014a4.236 4.236 0 1 1-4.706 4.209zm1.883 1.882c0 .26.21.47.47.47h3.764a.47.47 0 0 0 0-.94H8.941a.47.47 0 0 0-.47.47zm5.646 2.11a5.182 5.182 0 0 1-.941.62v.564H9.882a.47.47 0 0 0-.47.47 1.882 1.882 0 1 1-3.765 0 .47.47 0 0 0-.47-.47H1.883V6.575h4.329a5.142 5.142 0 0 1-.37-.94h-3.96c0-1.04.844-1.883 1.883-1.883h1.903c.03-.323.088-.638.174-.94H3.765A2.823 2.823 0 0 0 .942 5.633v7.53a2.823 2.823 0 0 0 2.823 2.822h7.529a2.823 2.823 0 0 0 2.823-2.823zm-.941 4.948c0 1.04-.843 1.882-1.882 1.882H3.765a1.882 1.882 0 0 1-1.882-1.882V10.34h2.862a2.824 2.824 0 0 0 5.569 0h2.862z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 922 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M.414 1.121C.152 1.517 0 1.991 0 2.5v3a.5.5 0 0 0 1 0v-3c0-.232.052-.45.146-.647l3.141 3.141A6.592 6.592 0 0 0 2.392 6.74a5.14 5.14 0 0 0-.33.521l-.006.01-.002.004v.001s-.001.001.446.225l-.447-.224a.5.5 0 0 0 .894.448v-.001l.01-.018.045-.078a4.14 4.14 0 0 1 .2-.303A5.582 5.582 0 0 1 5.02 5.726l1.293 1.293a3 3 0 1 0 4.168 4.168l3.667 3.667A1.494 1.494 0 0 1 13.5 15h-3a.5.5 0 0 0 0 1h3c.51 0 .984-.152 1.379-.414l.267.268a.5.5 0 0 0 .708-.707l-.268-.268-.732-.732-3.938-3.938L7.29 6.584 6.007 5.3l-.78-.78-3.374-3.374-.732-.732L.854.146a.5.5 0 1 0-.708.708zm9.34 9.34A2 2 0 1 1 7.04 7.746Zm6.221 3.393c.017-.116.025-.234.025-.354v-3a.5.5 0 0 0-1 0v2.379zM7.17 5.048C7.432 5.017 7.709 5 8 5c1.863 0 3.126.695 3.925 1.38.402.344.688.688.873.944a4.133 4.133 0 0 1 .245.381l.01.018v.002a.5.5 0 0 0 .894-.449v-.002l-.003-.004-.005-.01a5.13 5.13 0 0 0-.33-.522 6.491 6.491 0 0 0-1.034-1.118C11.626 4.805 10.137 4 8 4a7.68 7.68 0 0 0-1.695.183Zm6.777 2.228-.058.03-.387.193ZM3.121 1H5.5a.5.5 0 0 0 0-1h-3c-.12 0-.238.008-.354.025ZM2.5 15A1.5 1.5 0 0 1 1 13.5v-3a.5.5 0 0 0-1 0v3A2.5 2.5 0 0 0 2.5 16h3a.5.5 0 0 0 0-1Zm11-14A1.5 1.5 0 0 1 15 2.5v3a.5.5 0 0 0 1 0v-3A2.5 2.5 0 0 0 13.5 0h-3a.5.5 0 0 0 0 1Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M5.998 2h5.5a1.5 1.5 0 0 1 1.5 1.5V7h-1V3.5a.5.5 0 0 0-.5-.5h-5.5zm-3 4v5.5a.5.5 0 0 0 .5.5h3.5v1h-3.5a1.5 1.5 0 0 1-1.5-1.5V6Zm-3-4.5a1.5 1.5 0 0 1 1.5-1.5h2a1.5 1.5 0 0 1 1.5 1.5v2.043a1.5 1.5 0 0 1-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v2.043a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V1.5a.5.5 0 0 0-.5-.5zm6.504 8.5a1.5 1.5 0 0 1 1.5-1.5h5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5h-5a1.5 1.5 0 0 1-1.5-1.5zm1.5-.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" stroke-width=".942277" d="M2.36.462A2.356 2.356 0 0 0 .003 2.817v8.481a2.356 2.356 0 0 0 2.355 2.356h4.806a5.15 5.15 0 0 1-.37-.943H2.359c-.78 0-1.413-.632-1.413-1.413V4.702h3.836c.387 0 .757-.158 1.024-.439l1.377-1.446h5.541c.781 0 1.414.633 1.414 1.414v2.45c.337.172.653.38.942.62V4.23a2.356 2.356 0 0 0-2.356-2.356H7.228L5.72.745a1.413 1.413 0 0 0-.848-.283ZM.945 2.817c0-.78.633-1.413 1.413-1.413h2.513c.102 0 .201.033.283.094l1.157.868-1.188 1.248a.471.471 0 0 1-.342.146H.946Zm9.432 8.01c.044-1.063.235-2 .509-2.685.157-.394.333-.68.504-.861.17-.18.302-.223.391-.223.089 0 .221.043.391.223.171.18.347.467.504.86.274.685.465 1.623.509 2.686zm-.366-3.035c.06-.151.126-.296.196-.433a4.245 4.245 0 0 0-2.64 3.468h1.867c.045-1.163.252-2.223.577-3.035Zm3.54 0a4.98 4.98 0 0 0-.196-.433 4.244 4.244 0 0 1 2.64 3.468H14.13c-.045-1.163-.252-2.223-.577-3.035Zm.577 3.977h1.867a4.244 4.244 0 0 1-2.64 3.467c.07-.136.136-.281.196-.432.325-.812.532-1.873.577-3.035zm-1.956 3.546c-.17.18-.302.223-.391.223-.089 0-.221-.043-.391-.223-.171-.18-.347-.467-.504-.86-.274-.685-.465-1.623-.509-2.686h2.808c-.044 1.063-.235 2-.509 2.685-.157.394-.333.68-.504.861zM7.568 11.77a4.245 4.245 0 0 0 2.64 3.467 5.037 5.037 0 0 1-.196-.432c-.325-.812-.532-1.873-.577-3.035Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.854.146a.5.5 0 0 1 0 .708l-1.668 1.668a4.039 4.039 0 0 1-.332 5.331l-.3.3-.003.003-.308.309a1.05 1.05 0 0 1-1.485 0L7.535 4.242a1.05 1.05 0 0 1 0-1.485l.612-.61a4.036 4.036 0 0 1 5.331-.332L15.146.146a.5.5 0 0 1 .708 0zM13.14 2.847a3.037 3.037 0 0 0-4.286.006l-.3.3a.49.49 0 0 0 0 .693l3.6 3.6c.19.191.5.192.691.002l.002-.002.3-.3a3.036 3.036 0 0 0 .006-4.286l-.007-.006zm-5.786 3.8a.5.5 0 0 1 0 .707L5.707 9 7 10.293l1.646-1.647a.5.5 0 0 1 .708.708L7.707 11l.447.447a1.49 1.49 0 0 1 0 2.107l-.3.3a4.036 4.036 0 0 1-5.332.332L.854 15.854a.5.5 0 0 1-.708-.708l1.669-1.668a4.036 4.036 0 0 1 .331-5.331l.3-.3a1.49 1.49 0 0 1 2.108 0L5 8.293l1.646-1.647a.5.5 0 0 1 .708 0zm-4.495 6.505a3.036 3.036 0 0 0 4.287-.005l.3-.3a.49.49 0 0 0 0-.693l-3.6-3.6a.49.49 0 0 0-.692 0l-.3.3a3.036 3.036 0 0 0 0 4.292l.005.006z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 973 B |
@ -0,0 +1,4 @@
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M0 11a1 1 0 0 0 2 0 5 5 0 0 1 9.584-2H8.996a1 1 0 0 0 0 2H14a1 1 0 0 0 1-1V5a1 1 0 1 0-2 0v2.392A7 7 0 0 0 0 11z"/></svg>
|
||||
|
After Width: | Height: | Size: 445 B |
@ -24,10 +24,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _os_winTabBarTextColor {
|
||||
/* background textcolor */
|
||||
color: var(--lwt-text-color) !important;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include OS($win7) {
|
||||
#TabsToolbar {
|
||||
&:-moz-lwtheme {
|
||||
@ -81,18 +85,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _os_menuEmulate($bgRate, $bdRate) {
|
||||
menu[_moz-menuactive="true"],
|
||||
menuitem[_moz-menuactive="true"] {
|
||||
background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important;
|
||||
border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important;
|
||||
}
|
||||
menu[_moz-menuactive="true"][disabled="disabled"],
|
||||
menuitem[_moz-menuactive="true"][disabled="true"] {
|
||||
|
||||
&[disabled="true"] {
|
||||
background-color: color-mix(in srgb, currentColor $bgRate, transparent) !important;
|
||||
border-color: color-mix(in srgb, currentColor $bdRate, transparent) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include OS($win7) {
|
||||
@include _os_menuEmulate(5%, 60%);
|
||||
|
||||
@ -140,6 +148,7 @@
|
||||
}
|
||||
|
||||
/*= Linux - Light System Default Theme's Selected Tab ========================*/
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
$_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
@mixin _os_linuxDefaultThemeSelectedTab {
|
||||
#tabbrowser-tabs:not([noshadowfortests])
|
||||
@ -149,6 +158,9 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include OS($linux) {
|
||||
@include Light {
|
||||
/* Because of
|
||||
@ -167,3 +179,16 @@ $_os_linuxDefaultShadow: 0 0 4px rgba(128, 128, 142, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*= Titlebar Container Size at maximized #384 ================================*/
|
||||
@include Option("userChrome.compatibility.os.windows_maximized") {
|
||||
@include OS($win) {
|
||||
:root[tabsintitlebar][sizemode="maximized"] #titlebar {
|
||||
/* -moz-default-appearance: -moz-window-titlebar */
|
||||
appearance: none !important;
|
||||
|
||||
// Prevent sideeffect #370
|
||||
padding-top: 8px; // Don't use margin-top for reserved fullscreen animation
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,13 +31,13 @@
|
||||
@include Option("userContent.newTab.full_icon") {
|
||||
.top-site-outer .tile {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-site-outer .tile .icon-wrapper {
|
||||
.icon-wrapper {
|
||||
width: 100% !important; /* Original: 48px */
|
||||
height: 100% !important; /* Original: 48px */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Activity Stream - Animate ***********************************************/
|
||||
@include Option("userContent.newTab.animate") {
|
||||
@ -52,13 +52,10 @@
|
||||
button.icon,
|
||||
button.close-button {
|
||||
transition: background 1.5s var(--animation-easing-function);
|
||||
}
|
||||
.top-site-outer:hover,
|
||||
#searchSubmit:hover,
|
||||
button.icon:hover,
|
||||
button.close-button:hover {
|
||||
&:hover {
|
||||
transition: background 0.5s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Bar */
|
||||
.search-inner-wrapper input {
|
||||
@ -83,11 +80,11 @@
|
||||
.body-wrapper.on {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.body-wrapper.on > .discovery-stream.ds-layout {
|
||||
> .discovery-stream.ds-layout {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.body-wrapper.on > .collapsible-section[data-section-id="topstories"],
|
||||
.home-section > #pocket-section,
|
||||
@ -107,14 +104,13 @@
|
||||
--newtab-search-dropdown-header-color: var(--newtab-search-background-color) !important;
|
||||
--newtab-search-dropdown-color: var(--newtab-search-background-color) !important;
|
||||
--newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important;
|
||||
}
|
||||
|
||||
@include Dark {
|
||||
#root {
|
||||
/* Default Dark Mode */
|
||||
--newtab-search-background-color: rgba(66, 65, 77, 1); /* Same as dark theme's --panel-background */
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream[lwt-sidebar]:not([style*="--newtab-background-color: rgba(43, 42, 51, 1);"]) #root {
|
||||
/* Light weight theme */
|
||||
--newtab-search-background-color: var(--lwt-sidebar-background-color);
|
||||
@ -169,24 +165,26 @@
|
||||
background: var(--newtab-search-background-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
|
||||
.contentSearchSuggestionTable .contentSearchSettingsButton:hover {
|
||||
.contentSearchSuggestionTable {
|
||||
.contentSearchSuggestionRow.selected,
|
||||
.contentSearchSettingsButton:hover {
|
||||
color: var(--newtab-text-primary-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected,
|
||||
.contentSearchSuggestionTable .contentSearchSettingsButton:hover,
|
||||
.contentSearchSuggestionTable .contentSearchOneOffItem.selected {
|
||||
.contentSearchSuggestionRow.selected,
|
||||
.contentSearchSettingsButton:hover,
|
||||
.contentSearchOneOffItem.selected {
|
||||
background: var(--newtab-element-hover-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active,
|
||||
.contentSearchSuggestionTable .contentSearchOneOffItem:active {
|
||||
.contentSearchSuggestionRow.selected:active,
|
||||
.contentSearchOneOffItem:active {
|
||||
background: var(--newtab-element-active-color) !important;
|
||||
}
|
||||
|
||||
.contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
|
||||
.contentSearchSuggestionRow.selected .historyIcon {
|
||||
fill: var(--newtab-icon-secondary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml"),
|
||||
url("about:downloads") {
|
||||
@import "../icons/layout_menu_contents";
|
||||
|
||||
/*= Context Menu ===========================================================*/
|
||||
@include Option("userChrome.icon.context_menu") {
|
||||
/* Icon lists */
|
||||
@import "../icons/context_menu/downloads";
|
||||
@import "../icons/context_menu/place";
|
||||
}
|
||||
@include Option("userChrome.icon.global_menu") {
|
||||
@import "../icons/library";
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@-moz-document url-prefix("about:downloads") {
|
||||
@include Animate {
|
||||
@include Option("userChrome.decoration.download_panel") {
|
||||
@import "../decoration/download_panel";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -32,6 +32,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _backgroundImage($imgURL, $important: false) {
|
||||
background-image: url($imgURL) if($important, !important, null);
|
||||
@content;
|
||||
}
|
||||
|
||||
@mixin _errorContainerImage($imgURL) {
|
||||
#errorPageContainer {
|
||||
@include _backgroundImage($imgURL) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _errorDescriptionImage($imgURL) {
|
||||
.description-wrapper {
|
||||
@include _backgroundImage($imgURL) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _errorTitleImage($imgURL) {
|
||||
@media (min-width: 970px) {
|
||||
.title {
|
||||
@include _backgroundImage($imgURL, true) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@-moz-document url-prefix("about:neterror?e=connectionFailure"),
|
||||
url-prefix("about:neterror?e=netInterrupt"),
|
||||
url-prefix("about:neterror?e=netTimeout"),
|
||||
@ -39,66 +74,41 @@
|
||||
url-prefix("about:neterror?e=netOffline"),
|
||||
url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml")
|
||||
{
|
||||
#errorPageContainer {
|
||||
background-image: url("../icons/error-connection-failure.svg");
|
||||
}
|
||||
@include _errorContainerImage("../icons/error-connection-failure.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=dnsNotFound") {
|
||||
#errorPageContainer {
|
||||
background-image: url("../icons/error-server-not-found.svg");
|
||||
}
|
||||
@include _errorContainerImage("../icons/error-server-not-found.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=malformedURI") {
|
||||
#errorPageContainer {
|
||||
background-image: url("chrome://browser/skin/illustrations/error-malformed-url.svg");
|
||||
}
|
||||
@include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
|
||||
}
|
||||
@-moz-document url-prefix("about:neterror?e=clockSkewError"),
|
||||
url-prefix("about:neterror?e=nssFailure") {
|
||||
#errorPageContainer {
|
||||
background-image: url("../icons/blue-berror.svg");
|
||||
@include _errorContainerImage("../icons/blue-berror.svg") {
|
||||
background-size: 18.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml")
|
||||
{
|
||||
.description-wrapper {
|
||||
background-image: url("../icons/error-session-restore.svg");
|
||||
}
|
||||
@include _errorDescriptionImage("../icons/error-session-restore.svg");
|
||||
}
|
||||
|
||||
@-moz-document url-prefix("about:neterror?e=fileNotFound") {
|
||||
@media (min-width: 970px) {
|
||||
.title {
|
||||
background-image: url("chrome://global/skin/icons/info.svg") !important;
|
||||
}
|
||||
}
|
||||
@include _errorTitleImage("chrome://global/skin/icons/info.svg");
|
||||
|
||||
#text-container {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:tabcrashed") {
|
||||
@media (min-width: 970px) {
|
||||
.title {
|
||||
background-image: url("chrome://browser/skin/tab-crashed.svg") !important;
|
||||
}
|
||||
}
|
||||
@include _errorTitleImage("chrome://browser/skin/tab-crashed.svg");
|
||||
}
|
||||
@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml")
|
||||
{
|
||||
@media (min-width: 970px) {
|
||||
.title {
|
||||
background-image: url("chrome://browser/content/aboutRobots-icon.png") !important;
|
||||
}
|
||||
}
|
||||
@include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png");
|
||||
}
|
||||
@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml")
|
||||
{
|
||||
@media (min-width: 970px) {
|
||||
.title {
|
||||
background-image: url("../icons/welcome-back.svg") !important;
|
||||
}
|
||||
}
|
||||
@include _errorTitleImage("../icons/welcome-back.svg");
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@-moz-document url-prefix("about:"),
|
||||
url-prefix("chrome://browser/content/places/places.xhtml"),
|
||||
url-prefix("https://addons.mozilla.org"),
|
||||
url-prefix("https://support.mozilla.org"),
|
||||
url-prefix("https://accounts.firefox.com"),
|
||||
|
||||
@ -1,30 +1,32 @@
|
||||
/* Control Bar Size */
|
||||
@include Option("userContent.player.size") {
|
||||
#controlsContainer {
|
||||
--button-size: 32px !important; /* Original: 30px */
|
||||
// --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404
|
||||
--controlBar-height: 40px; /* Original: 40px, Replace to this value */
|
||||
}
|
||||
#controlsContainer .touch {
|
||||
.touch {
|
||||
--button-size: 48px !important; /* Original: 40px */
|
||||
--controlBar-height: 52px; /* Original: 52px */
|
||||
}
|
||||
.videocontrols[inDOMFullscreen] #controlsContainer {
|
||||
.controlBar {
|
||||
height: var(--controlBar-height) !important; /* Original: 40px */
|
||||
}
|
||||
}
|
||||
.videocontrols[inDOMFullscreen] {
|
||||
#controlsContainer {
|
||||
--button-size: 64px !important; /* Original: 30px */
|
||||
--track-size: 6px !important; /* Original: 5px, Touch: 7px */
|
||||
--thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
|
||||
--controlBar-height: 64px; /* Original: 40px */
|
||||
}
|
||||
.videocontrols[inDOMFullscreen] #controlsContainer .touch {
|
||||
.touch {
|
||||
--button-size: 72px !important; /* Original: 40px */
|
||||
--controlBar-height: 64px; /* Original: 52px */
|
||||
}
|
||||
#controlsContainer .controlBar {
|
||||
height: var(--controlBar-height) !important; /* Original: 40px */
|
||||
}
|
||||
.videocontrols[inDOMFullscreen] #controlsContainer .controlBar {
|
||||
.controlBar {
|
||||
padding-bottom: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Control Bar UI */
|
||||
@include Option("userContent.player.ui") {
|
||||
@ -39,31 +41,31 @@
|
||||
box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
|
||||
0 8px 12px 1px var(--box-shadow3);
|
||||
/* Or: 0 2px 15px rgba(0,0,0,.1); */
|
||||
}
|
||||
video {
|
||||
--duration-color: #eee;
|
||||
--media-background: linear-gradient(transparent, rgba(26,26,26,.85));
|
||||
}
|
||||
|
||||
@include Dark {
|
||||
audio {
|
||||
--box-shadow1: rgba(249, 249, 250, 0.12);
|
||||
--box-shadow2: rgba(91, 91, 102, 0.12);
|
||||
--box-shadow3: rgba(82, 82, 94, 0.04);
|
||||
}
|
||||
}
|
||||
@include Contrast {
|
||||
video {
|
||||
--duration-color: #eee;
|
||||
--media-background: linear-gradient(transparent, rgba(26,26,26,.85));
|
||||
|
||||
@include Contrast {
|
||||
--duration-color: #929292; /* Like Original */
|
||||
--media-background: rgba(26,26,26,.8); /* Like Original */
|
||||
}
|
||||
}
|
||||
#controlsContainer .controlBar {
|
||||
|
||||
#controlsContainer {
|
||||
.controlBar {
|
||||
background: var(--media-background) !important;
|
||||
}
|
||||
#controlsContainer .duration {
|
||||
.duration {
|
||||
color: var(--duration-color) !important; /* Original: #929292 */
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userContent.player.ui.twoline") {
|
||||
audio {
|
||||
@ -138,14 +140,15 @@
|
||||
transform:scale(1);
|
||||
}
|
||||
|
||||
#controlsContainer .controlBar {
|
||||
#controlsContainer {
|
||||
.controlBar {
|
||||
flex-wrap: var(--controlBar-flex-wrap);
|
||||
justify-content: var(--controlBar-justify-content);
|
||||
align-content: var(--controlBar-align-content);
|
||||
height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
|
||||
padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
|
||||
}
|
||||
#controlsContainer .scrubberStack {
|
||||
.scrubberStack {
|
||||
/* Vertical */
|
||||
order: var(--scrubberStack-order);
|
||||
height: var(--scrubberStack-height, var(--thumb-size)) !important;
|
||||
@ -156,11 +159,12 @@
|
||||
width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
|
||||
margin-inline: var(--scrubberStack-margin-inline) !important;
|
||||
}
|
||||
#controlsContainer .positionDurationBox {
|
||||
.positionDurationBox {
|
||||
flex-grow: var(--positionDurationBox-flex-grow);
|
||||
margin-left: var(--positionDurationBox-margin-left);
|
||||
text-align: var(--positionDurationBox-text-align) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#playButton {
|
||||
margin-left: var(--button-outside-margin) !important;
|
||||
@ -174,11 +178,11 @@
|
||||
@include Option("userContent.player.icon") {
|
||||
#controlsContainer .fullscreenButton {
|
||||
background-image: url("../icons/enter-fullscreen.svg") !important;
|
||||
}
|
||||
#controlsContainer .fullscreenButton[fullscreened] {
|
||||
&[fullscreened] {
|
||||
background-image: url("../icons/exit-fullscreen.svg") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include Option("userContent.player.noaudio") {
|
||||
#controlsContainer .muteButton[noAudio] {
|
||||
@ -189,18 +193,20 @@
|
||||
|
||||
/* Click to play UI */
|
||||
@include Option("userContent.player.click_to_play") {
|
||||
#controlsContainer .clickToPlay {
|
||||
#controlsContainer {
|
||||
.clickToPlay {
|
||||
cursor: pointer;
|
||||
opacity: 0.65 !important;
|
||||
}
|
||||
#controlsContainer .controlsSpacerStack:hover > .clickToPlay {
|
||||
.controlsSpacerStack:hover > .clickToPlay {
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
#controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover {
|
||||
&:hover {
|
||||
opacity: 1 !important;
|
||||
fill: #48a0f7 !important; /* color as .scrubber */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@include Option("userContent.player.animate") {
|
||||
@ -209,18 +215,19 @@
|
||||
#controlsContainer .controlBar {
|
||||
transition: transform 350ms ease;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
#controlsContainer .controlBar[hidden] {
|
||||
&[hidden] {
|
||||
transform: translateY(100%);
|
||||
transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
#controlsContainer .controlBar[hidden] .progressBar,
|
||||
#controlsContainer .controlBar[hidden] .bufferBar {
|
||||
|
||||
.progressBar,
|
||||
.bufferBar {
|
||||
display: unset !important;
|
||||
opacity: 0.55;
|
||||
transition: opacity 150ms ease 50ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Two line Control Bar */
|
||||
.scrubber::-moz-range-thumb,
|
||||
|
||||
@ -4,13 +4,16 @@
|
||||
/* Basic */
|
||||
.Page-content,
|
||||
.SecondaryHero,
|
||||
body:not(.developer-hub):not(.statistics),
|
||||
body,
|
||||
main[aria-label="Content"] {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.Page-content h1,
|
||||
@ -19,6 +22,7 @@
|
||||
.Home-SubjectShelf-link:link,
|
||||
.Home-SubjectShelf-link:visited,
|
||||
.DropdownMenuItem-link a,
|
||||
.DropdownMenuItem-link button,
|
||||
.Select,
|
||||
.Badge,
|
||||
.Notice-generic,
|
||||
@ -43,6 +47,7 @@
|
||||
.SearchResult:hover .SearchResult-link,
|
||||
.Home-SubjectShelf-link:is(:active, :focus, :hover),
|
||||
.DropdownMenuItem-link a:is(:active, :focus, :hover),
|
||||
.DropdownMenuItem-link button: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),
|
||||
@ -59,6 +64,7 @@
|
||||
.AddonTitle a,
|
||||
.TooltipMenu-opener,
|
||||
.LanguageTools .Card-contents a,
|
||||
.Button--primary,
|
||||
.blog-entry-read-more-link,
|
||||
.blogpost-nav-next.blogpost-nav-no-prev:hover p,
|
||||
.blogpost-content-wrapper p a,
|
||||
@ -98,29 +104,38 @@
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.Button--action {
|
||||
.Button--action,
|
||||
.DevHub-Navigation ul li.DevHub-Navigation-Register .Button,
|
||||
.DevHub-MyAddons-item-buttons-submit .Button {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
select,
|
||||
.Select,
|
||||
.Button--primary,
|
||||
.Button--neutral,
|
||||
.Button--neutral:link,
|
||||
.Notice-button,
|
||||
.AMInstallButton .AMInstallButton-loading-button {
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
}
|
||||
.Button--primary:hover,
|
||||
.Button--neutral.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--neutral:not(.Button--disabled):hover,
|
||||
.Notice-button:hover {
|
||||
background: var(--in-content-button-background-hover) !important;
|
||||
}
|
||||
.Button--action.Button--micro:not(.Button--disabled):hover,
|
||||
.Button--action:not(.Button--disabled):hover {
|
||||
.Button--action:not(.Button--disabled):hover,
|
||||
.DevHub-Navigation ul li.DevHub-Navigation-Register .Button:hover,
|
||||
.DevHub-MyAddons-item-buttons-submit .Button: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;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
.AutoSearchInput-query,
|
||||
.AutoSearchInput-suggestions-list,
|
||||
.SecondaryHero-module,
|
||||
@ -185,13 +200,27 @@
|
||||
box-shadow: 0 0 2px var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border-color: var(--in-content-box-border-color) !important;
|
||||
}
|
||||
.UserProfileEdit input:disabled,
|
||||
.UserProfileEdit textarea:disabled {
|
||||
background-color: var(--in-content-box-background-odd) !important;
|
||||
}
|
||||
|
||||
.AutoSearchInput-query {
|
||||
border: 1px solid var(--in-content-table-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:is(:hover, :focus) {
|
||||
.AutoSearchInput-query:is(:hover, :focus),
|
||||
.UserProfileEditNotifications .UserProfileEditNotification-input:checked ~ .UserProfileEditNotification-checkbox {
|
||||
border-color: var(--in-content-primary-button-background) !important;
|
||||
}
|
||||
.AutoSearchInput-query:focus {
|
||||
.UserProfileEdit input:focus,
|
||||
.UserProfileEdit textarea:focus,
|
||||
.AutoSearchInput-query:focus,
|
||||
.UserProfileEditNotifications .UserProfileEditNotification-input:focus ~ .UserProfileEditNotification-checkbox {
|
||||
box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
|
||||
0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
|
||||
}
|
||||
@ -213,6 +242,12 @@
|
||||
}
|
||||
|
||||
/* /developers/ */
|
||||
.DevHub-Navigation-Logo > .Logo::before {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: var(--in-content-primary-button-background) !important;
|
||||
background-image: url("../icons/addons-logo.svg") !important;
|
||||
}
|
||||
|
||||
.DevHub-Navigation,
|
||||
.DevHub-submit-addon,
|
||||
.DevHub-get-involved,
|
||||
@ -220,11 +255,14 @@
|
||||
background: var(--in-content-page-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
.DevHub-Footer,
|
||||
.DevHub-callout-box {
|
||||
.DevHub-Footer {
|
||||
background: var(--in-content-box-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
.DevHub-callout-box {
|
||||
background: var(--in-content-box-background-odd) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
.DevHub-Navigation.scheme-light ul li a,
|
||||
.DevHub-Footer-sections-header,
|
||||
@ -233,10 +271,275 @@
|
||||
.DevHub-content-copy h2 {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
.DevHub-content-copy p,
|
||||
.DevHub-callout-box p {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.DevHub-Banner a,
|
||||
.DevHub-Footer a,
|
||||
.DevHub-MyAddons-list a,
|
||||
.DevHub-MyAddons-item-buttons-all {
|
||||
.DevHub-MyAddons-item-buttons-all,
|
||||
.DevHub-content-copy a,
|
||||
.DevHub-callout-box a {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
|
||||
body:is(.developer-hub, .statistics) {
|
||||
#main-wrapper,
|
||||
.menu-nav > ul > li > ul::after,
|
||||
.menu-nav > ul > li:hover::after,
|
||||
.menu-nav > ul > li > ul,
|
||||
.menu-nav > ul > li > ul a,
|
||||
.menu-nav em,
|
||||
.primary, .secondary,
|
||||
.dashboard .listing .item {
|
||||
background: var(--in-content-page-background) !important;
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
|
||||
/* Elements */
|
||||
.menu-nav > ul > li > ul a:hover,
|
||||
.install-note,
|
||||
.modal,
|
||||
.popup {
|
||||
background: var(--in-content-box-background-odd) !important;
|
||||
}
|
||||
|
||||
.menu-nav > ul > li > ul::after,
|
||||
.menu-nav > ul > li > ul {
|
||||
box-shadow: 0 0 3px var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
/* .developer-hub */
|
||||
#footer {
|
||||
background: linear-gradient(
|
||||
to bottom,var(--in-content-page-background) 0,
|
||||
var(--in-content-page-background) 123px,
|
||||
#0c99d5 123px,
|
||||
#0c99d5 200px,
|
||||
var(--in-content-page-background) 200px,
|
||||
rgba(12,153,213,0) 400px
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Text */
|
||||
/* .developer-hub */ #homepage h2,
|
||||
/* .developer-hub */ header h2,
|
||||
.primary h2,
|
||||
h1,
|
||||
hgroup h2.addon,
|
||||
hgroup h2.collection,
|
||||
h3,
|
||||
.results h4,
|
||||
.dashboard .listing .item,
|
||||
.dashboard .listing .item:hover h5,
|
||||
.secondary .addon-status,
|
||||
.secondary .addon-status .addon-details li.addon-listed-status,
|
||||
#refine-results h5,
|
||||
.island.criteria li,
|
||||
.two-up div {
|
||||
color: var(--in-content-page-color) !important;
|
||||
}
|
||||
.item-actions h5, .item-actions > ul, .item-actions > ul > li,
|
||||
.dashboard .listing .item .item-actions a,
|
||||
.edit-media-details,
|
||||
.devhub-form table th,
|
||||
#recent-activity .listing .item .timestamp,
|
||||
#upload-file .upload-status #uploadstatus,
|
||||
#addon-validator-suite,
|
||||
#addon-validator-suite .msg > *,
|
||||
.island.criteria li a.inactive {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
|
||||
section[role="main"] a,
|
||||
header a,
|
||||
.more-info,
|
||||
.primary a,
|
||||
.secondary a,
|
||||
.submission-type-tabs a,
|
||||
.popup a,
|
||||
.dashboard .listing .item:hover a,
|
||||
.dashboard .listing .item:hover .item-actions a,
|
||||
#upload-status-results.status-pass strong,
|
||||
#addon-validator-suite a,
|
||||
#create-addon a,
|
||||
.html-support {
|
||||
color: var(--in-content-link-color) !important;
|
||||
}
|
||||
.dashboard .listing .item:hover a {
|
||||
color: var(--in-content-link-color-hover) !important;
|
||||
}
|
||||
|
||||
.dashboard .listing .item .item-info .downloads,
|
||||
.dashboard .listing .item .item-info .price,
|
||||
.dashboard .listing .item .item-info .users {
|
||||
color: var(--green-60) !important;
|
||||
}
|
||||
|
||||
.status-admin-disabled b,
|
||||
.status-disabled b,
|
||||
.status-incomplete b,
|
||||
.status-purgatory b {
|
||||
color: var(--red-60) !important;
|
||||
}
|
||||
|
||||
.submission-type-tabs a.active,
|
||||
.island.criteria li.selected a {
|
||||
color: var(--orange-50) !important;
|
||||
}
|
||||
|
||||
/* Background */
|
||||
.secondary .addon-status,
|
||||
.devhub-form .item,
|
||||
#icons_default,
|
||||
.listing .item,
|
||||
.object-lead,
|
||||
#addon-validator-suite .results .tier-results,
|
||||
#addon-validator-suite .suite,
|
||||
#addon-validator-suite .suite-container {
|
||||
border-color: var(--in-content-border-color) !important;
|
||||
background: var(--in-content-box-background) !important;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.listing-footer, .tab-wrapper .fm-control {
|
||||
color: var(--in-content-page-color) !important;
|
||||
background: var(--in-content-box-info-background) !important;
|
||||
}
|
||||
|
||||
.submission-type-tabs a,
|
||||
#head-chart {
|
||||
background: var(--in-content-page-background) !important;
|
||||
}
|
||||
#head-chart {
|
||||
rect {
|
||||
fill: var(--in-content-page-background) !important;
|
||||
}
|
||||
text{
|
||||
fill: var(--in-content-deemphasized-text) !important;
|
||||
}
|
||||
.highcharts-legend .highcharts-legend-item:hover text {
|
||||
fill: var(--in-content-page-color) !important;
|
||||
paint-order: stroke !important;
|
||||
stroke: var(--in-content-page-color) !important;
|
||||
stroke-width: 0.4px !important;
|
||||
stroke-linecap: butt !important;
|
||||
stroke-linejoin: miter !important;
|
||||
}
|
||||
.highcharts-legend .highcharts-legend-item path[stroke="#CCC"] ~ text {
|
||||
fill: #CCC !important;
|
||||
}
|
||||
}
|
||||
|
||||
#icons_default li a:hover,
|
||||
#side-nav .active a,
|
||||
span.tip,
|
||||
.addon-submission-process .tip,
|
||||
.devhub-form .tip,
|
||||
a.remove,
|
||||
span.remove,
|
||||
ul.errorlist li span.tip {
|
||||
background-color: var(--in-content-box-info-background) !important;
|
||||
}
|
||||
a.remove:hover, span.tip:hover {
|
||||
background-color: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
|
||||
/* Border */
|
||||
.submission-type-tabs a,
|
||||
.devhub-sidebar,
|
||||
.devhub-sidebar div.item,
|
||||
.devhub-form .listing-footer {
|
||||
border-color: var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
#background-wrapper,
|
||||
#main-wrapper {
|
||||
border-color: var(--in-content-page-background) !important;
|
||||
}
|
||||
|
||||
.item-actions a.more-actions:hover:after,
|
||||
.item-actions button.link.more-actions:hover:after,
|
||||
#change-locale::after {
|
||||
border-top-color: var(--in-content-link-color) !important;
|
||||
}
|
||||
|
||||
install-note::after, .popup::after {
|
||||
border-bottom-color: var(--in-content-box-background) !important;
|
||||
}
|
||||
.install-note::before, .popup::before {
|
||||
border-bottom-color: grey !important;
|
||||
}
|
||||
|
||||
#refine-results, .other-categories,
|
||||
.versions .primary > .warning {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.results {
|
||||
border-color: var(--in-content-box-background-odd) !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.results-inner {
|
||||
border-color: var(--in-content-border-color) !important;
|
||||
background: var(--in-content-border-color) !important;
|
||||
}
|
||||
|
||||
/* Othres */
|
||||
#promos .view-button a,
|
||||
#upload-file-finish.button,
|
||||
#upload-file-widget .button.prominent,
|
||||
.button,
|
||||
.cta a.button:link,
|
||||
.cta a.button:visited,
|
||||
.linux .button.linux,
|
||||
.mac .button.mac,
|
||||
.other .button.bsd,
|
||||
.other .button.solaris,
|
||||
.sidebar a.button,
|
||||
.sidebar button,
|
||||
.theme .choices button,
|
||||
.theme-queue a.button,
|
||||
.theme-queue button,
|
||||
.windows .button.windows,
|
||||
a.button:link,
|
||||
a.button:visited,
|
||||
a.delete-button.delete-addon,
|
||||
button,
|
||||
button.button,
|
||||
input:not(.upvotes):not(.downvotes)[type="submit"] {
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background: var(--in-content-primary-button-background) !important;
|
||||
&:is(.selected, :focus, :hover) {
|
||||
background: var(--in-content-primary-button-background-hover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.edit_with_prefix span,
|
||||
.edit_with_suffix span {
|
||||
border-color: var(--in-content-box-border-color) !important;
|
||||
background-color: var(--in-content-box-background-odd) !important;
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
padding-block: 3px !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.devhub-form .item_wrapper input[type="email"] {
|
||||
appearance: none !important;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#addon-validator-suite .suite-summary {
|
||||
color: var(--in-content-deemphasized-text) !important;
|
||||
background: var(--in-content-button-background) !important;
|
||||
border-top-color: var(--in-content-border-color) !important;;
|
||||
}
|
||||
#addon-validator-suite .context {
|
||||
border-color: var(--in-content-box-border-color) !important;
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
background: var(--in-content-table-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
@-moz-document url-prefix("about:") {
|
||||
html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover,
|
||||
html|textarea:hover,
|
||||
xul|search-textbox:hover {
|
||||
border-color: var(--in-content-focus-outline-color) !important;
|
||||
transition: border-color 0.5s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
@-moz-document url-prefix("about:config") {
|
||||
#about-config-search:hover {
|
||||
border-color: var(--in-content-focus-outline-color) !important;
|
||||
transition: border-color 0.5s var(--animation-easing-function);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/*- Background Color -------------------------------------------------------*/
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _animate_bgColor($duration, $presudo: "") {
|
||||
button#{$presudo},
|
||||
toolbarbutton#{$presudo},
|
||||
@ -9,6 +10,9 @@
|
||||
transition: background-color $duration var(--animation-easing-function) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include _animate_bgColor(1s);
|
||||
@include _animate_bgColor(0.25s, ":hover");
|
||||
@include OS($linux) {
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
:root[sizemode="fullscreen"] #navigator-toolbox {
|
||||
position: fixed !important; /* Needed for content to take up entire height */
|
||||
z-index: 1000 !important; /* Puts the UI above the content */
|
||||
}
|
||||
|
||||
:root[sizemode="fullscreen"] :-moz-any(#navigator-toolbox, #titlebar, #nav-bar, #PersonalToolbar) {
|
||||
width: 100%; /* Makes the UI take up the entire width */
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
/* Fix transparent backgorund */
|
||||
:root[tabsintitlebar][sizemode="fullscreen"] #TabsToolbar:not(:-moz-lwtheme) {
|
||||
appearance: auto !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
:root:not([sizemode="fullscreen"]) #PersonalToolbar[initialized="true"]:not([collapsed="true"]),
|
||||
:root[sizemode="fullscreen"] #PersonalToolbar[initialized="true"] {
|
||||
visibility: unset !important; /* Makes the bookmarks toolbar visible if enabled */
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
/** Context Menu - Icons ******************************************************/
|
||||
@import "context_menu/tab_toolbar.scss";
|
||||
@import "context_menu/content_area.scss";
|
||||
@import "context_menu/downloads";
|
||||
@import "context_menu/place";
|
||||
@import "context_menu/others";
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
|
||||
}
|
||||
#menu_newUserContext {
|
||||
--menuitem-image: url("../icons/container-openin-16.svg");
|
||||
}
|
||||
#menu_newNavigator {
|
||||
--menuitem-image: url("chrome://browser/skin/window.svg");
|
||||
@ -43,6 +44,8 @@
|
||||
}
|
||||
|
||||
#goOfflineMenuitem {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/plug-disconnected.svg");
|
||||
}
|
||||
#menu_FileQuitItem {
|
||||
--menuitem-image: url("../icons/quit.svg");
|
||||
@ -58,6 +61,9 @@
|
||||
--menuitem-image: url("../icons/undo.svg");
|
||||
}
|
||||
#menu_redo {
|
||||
@include Option("userChrome.icon.menu.full") {
|
||||
--menuitem-image: url("../icons/redo.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#menu_cut {
|
||||
@ -109,12 +115,14 @@
|
||||
}
|
||||
|
||||
#fullScreenItem {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("chrome://browser/skin/fullscreen.svg");
|
||||
}
|
||||
#menu_readerModeItem {
|
||||
--menuitem-image: url("chrome://browser/skin/reader-mode.svg");
|
||||
}
|
||||
#menu_showAllTabs {
|
||||
--menuitem-image: url("../icons/tab.svg");
|
||||
}
|
||||
|
||||
#documentDirection-swap {
|
||||
@ -152,6 +160,7 @@
|
||||
--menuitem-image: url("../icons/restore-session.svg");
|
||||
}
|
||||
#hiddenTabsMenu {
|
||||
--menuitem-image: url("../icons/eye-hide.svg")
|
||||
}
|
||||
#historyUndoMenu {
|
||||
--menuitem-image: url("chrome://browser/skin/tab.svg");
|
||||
@ -220,6 +229,8 @@
|
||||
#enableDeveloperTools {
|
||||
}
|
||||
#menu_devToolbox {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/developer.svg");
|
||||
}
|
||||
#menu_taskManager {
|
||||
--menuitem-image: url("../icons/performance.svg");
|
||||
@ -237,8 +248,12 @@
|
||||
--menuitem-image: url("chrome://devtools/skin/images/command-console.svg");
|
||||
}
|
||||
#menu_responsiveUI {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/command-responsivemode.svg");
|
||||
}
|
||||
#menu_eyedropper {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("chrome://devtools/skin/images/command-eyedropper.svg");
|
||||
}
|
||||
#menu_pageSource {
|
||||
--menuitem-image: url("../icons/document-search.svg");
|
||||
|
||||
@ -15,6 +15,43 @@ menupopup menupopup[emptyplacesresult] .menu-text,
|
||||
--context-menu-background-padding: var(--arrowpanel-menuitem-padding-inline);
|
||||
}
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
// Items
|
||||
$_bookmarkMenuitem: "menuitem:not(.menuitem-iconic, [disabled=\"true\"])";
|
||||
$_bookmarkMenu: "menu:not(.menu-iconic)";
|
||||
|
||||
// Components
|
||||
$_bookmarkPopup: "menupopup:is(#BMB_bookmarksPopup)";
|
||||
$_bookmarkToolbar: "#PersonalToolbar menupopup[placespopup=\"true\"]";
|
||||
|
||||
$_bookmarkPopupMenus: selector.nest(
|
||||
$_bookmarkPopup,
|
||||
"#{$_bookmarkMenuitem}, #{$_bookmarkMenu}"
|
||||
);
|
||||
$_bookmarkToolbarMenus: selector.nest(
|
||||
$_bookmarkToolbar,
|
||||
"#{$_bookmarkMenuitem}, #{$_bookmarkMenu}"
|
||||
);
|
||||
|
||||
@mixin _layoutBookmarkMenu() {
|
||||
#{$_bookmarkPopupMenus},
|
||||
#{$_bookmarkToolbarMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _layoutBookmarkPopup() {
|
||||
#{$_bookmarkPopupMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _layoutBookmarkToolbar() {
|
||||
#{$_bookmarkToolbarMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
/* Windows 7, 8 */
|
||||
@include OS($win7, $win8) {
|
||||
/* Global Menu */
|
||||
@ -27,19 +64,14 @@ menupopup menupopup[emptyplacesresult] .menu-text,
|
||||
#PersonalToolbar {
|
||||
--arrowpanel-menuicon-padding: 9px;
|
||||
}
|
||||
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkMenu() {
|
||||
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
|
||||
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
|
||||
}
|
||||
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkPopup() {
|
||||
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding) + 2px) !important;
|
||||
}
|
||||
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkToolbar() {
|
||||
padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
|
||||
}
|
||||
}
|
||||
@ -47,10 +79,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
|
||||
/* Windows */
|
||||
@include OS($win10) {
|
||||
/* Bookmark Popup - None icon menu */
|
||||
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkMenu() {
|
||||
margin-inline: var(--arrowpanel-menuitem-padding-inline) !important;
|
||||
padding-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--context-menu-text-padding)) !important;
|
||||
background-position: left calc(var(--arrowpanel-menuicon-padding)) center !important;
|
||||
@ -70,10 +99,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
|
||||
padding-inline-start: 1px !important;
|
||||
}
|
||||
/* Bookmark Popup - None icon menu */
|
||||
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
#PersonalToolbar menupopup[placespopup="true"] menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkMenu() {
|
||||
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 1px) !important;
|
||||
}
|
||||
}
|
||||
@ -86,8 +112,7 @@ menupopup menupopup[emptyplacesresult] .menu-text,
|
||||
}
|
||||
|
||||
/* Bookmark Popup - None icon menu */
|
||||
menupopup:is(#BMB_bookmarksPopup) menuitem:not(.menuitem-iconic, [disabled="true"]),
|
||||
menupopup:is(#BMB_bookmarksPopup) menu:not(.menu-iconic) {
|
||||
@include _layoutBookmarkPopup() {
|
||||
padding-inline-start: calc(var(--arrowpanel-menuitem-padding-inline) + 3px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,208 +1,125 @@
|
||||
menupopup menuitem:not([type="checkbox"], [type="radio"]),
|
||||
menupopup menu:not([type="checkbox"], [type="radio"]),
|
||||
#main-menubar > menu {
|
||||
-moz-appearance: none !important; /* Linux: menulist */
|
||||
@import "./layout_menu_common";
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
// Components
|
||||
$_layoutCommonMenus: (
|
||||
$_iconMenuPopupMenus,
|
||||
$_libraryMenuitem,
|
||||
$_libraryMenu,
|
||||
$_sendTabMenuitem,
|
||||
$_otherIconMenu
|
||||
);
|
||||
@mixin _layoutInitIconMenus() {
|
||||
#{$_globalMenus},
|
||||
#{$_nestedPopupIconMenus},
|
||||
#{$_layoutCommonMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _layoutInitPaddingMenus() {
|
||||
#{selector.nest($_nestedPopupPadding, "menuitem:not(.menuitem-iconic), menu:not(.menu-iconic)")},
|
||||
#{$_nestedPopupPaddingMenus},
|
||||
#{$_layoutCommonMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin _layoutIconMenus() {
|
||||
#{$_nestedPopupPaddingMenus},
|
||||
#{$_layoutCommonMenus} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#{$_initialMenus},
|
||||
#{$_globalMenus} {
|
||||
@include _initial_menus;
|
||||
}
|
||||
|
||||
/* Icon */
|
||||
:not(menu, #ContentSelectDropdown)
|
||||
> menupopup
|
||||
> menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
:not(menu, #ContentSelectDropdown)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
#main-menubar > menu,
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
|
||||
.openintabs-menuitem,
|
||||
#blockedPopupDontShowMessage {
|
||||
/* Color */
|
||||
-moz-context-properties: fill, fill-opacity !important;
|
||||
fill: currentColor !important;
|
||||
|
||||
/* Layout */
|
||||
background-size: 16px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-image: var(--menuitem-image);
|
||||
@include _layoutInitIconMenus {
|
||||
@include _layout_icon_menus;
|
||||
}
|
||||
|
||||
/* For native context menus on macOS */
|
||||
@supports -moz-bool-pref("widget.macos.native-context-menus") {
|
||||
:not(menu, #ContentSelectDropdown)
|
||||
> menupopup
|
||||
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
:not(menu, #ContentSelectDropdown)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) {
|
||||
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
|
||||
}
|
||||
/* For native context menus */
|
||||
#{$_nestedPopupIconMenus} {
|
||||
@include _layout_icon_native_menus;
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
:root {
|
||||
--context-menu-background-padding-default: 5px;
|
||||
--context-menu-background-padding: var(--context-menu-background-padding-default);
|
||||
}
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem:not(.menuitem-iconic),
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
|
||||
.openintabs-menuitem,
|
||||
#blockedPopupDontShowMessage {
|
||||
background-position: left var(--context-menu-background-padding) center !important;
|
||||
padding-inline-start: var(--context-menu-background-padding) !important;
|
||||
@include _layout_root_padding;
|
||||
@include _layoutInitPaddingMenus {
|
||||
@include _layout_init_padding;
|
||||
}
|
||||
|
||||
/* Menubar */
|
||||
@include Option("userChrome.icon.global_menubar") {
|
||||
#main-menubar > menu {
|
||||
#{$_globalMenus} {
|
||||
background-position: left var(--context-menu-background-padding-default) center !important;
|
||||
padding-inline-start: calc(16px + var(--context-menu-background-padding-default)) !important;
|
||||
padding-inline-end: 3px;
|
||||
}
|
||||
#main-menubar > menu:first-child {
|
||||
|
||||
&:first-child {
|
||||
background-position: left calc(3px + var(--context-menu-background-padding-default)) center !important;
|
||||
padding-inline-start: calc(19px + var(--context-menu-background-padding-default)) !important;
|
||||
}
|
||||
#main-menubar > menu > menupopup {
|
||||
> menupopup {
|
||||
--menuitem-image: none; /* Prevent Image Inheritance */
|
||||
}
|
||||
|
||||
@include NotOption("userChrome.padding.global_menubar") {
|
||||
#main-menubar > menu {
|
||||
padding-block: 2px !important;;
|
||||
padding-block: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Windows */
|
||||
@include OS($win) {
|
||||
/* 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"]:not([checked="true"])
|
||||
> .menu-iconic-left {
|
||||
padding-inline-start: var(--context-menu-text-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@include OS($win7) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 2px;
|
||||
}
|
||||
}
|
||||
@include OS($win8) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 3px;
|
||||
}
|
||||
}
|
||||
@include _layout_root_win7_8;
|
||||
@include OS($win7, $win8) {
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
|
||||
.openintabs-menuitem,
|
||||
#blockedPopupDontShowMessage {
|
||||
background-position: left var(--context-menu-background-padding) center !important;
|
||||
padding-inline-start: 0 !important;
|
||||
@include _layoutIconMenus {
|
||||
@include _layout_init_win7_8();
|
||||
}
|
||||
}
|
||||
@include OS($win10) {
|
||||
:root {
|
||||
--context-menu-background-padding: 1em;
|
||||
--context-menu-text-padding: 24px; /* 16px + 8px */
|
||||
--menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
|
||||
}
|
||||
@include _layout_root_win10;
|
||||
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]),
|
||||
menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem,
|
||||
menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu,
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup) > menuitem,
|
||||
.openintabs-menuitem,
|
||||
#blockedPopupDontShowMessage {
|
||||
padding-inline-start: var(--menu-background-padding-default) !important;
|
||||
margin-left: 0 !important;
|
||||
@include _layoutIconMenus {
|
||||
@include _layout_init_win10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Linux */
|
||||
@include OS($linux) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 6px;
|
||||
}
|
||||
@include _layout_root_linux;
|
||||
|
||||
#main-menubar > menu > .menubar-text {
|
||||
padding-inline-start: 3px;
|
||||
#{$_globalMenus} > .menubar-text {
|
||||
@include _layout_init_linux;
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Mac */
|
||||
@include OS($mac) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 10px;
|
||||
--context-menu-mac-padding: 21px;
|
||||
}
|
||||
@include _layout_root_mac;
|
||||
|
||||
/* context menu width */
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation)
|
||||
> menupopup
|
||||
> menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist),
|
||||
#{$_nestedPopupPaddingMenus},
|
||||
#blockedPopupDontShowMessage {
|
||||
padding-inline-end: var(--context-menu-background-padding) !important;
|
||||
@include _layout_init_mac_width;
|
||||
}
|
||||
|
||||
/* text position */
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem > .menu-text,
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu > menu-text {
|
||||
padding-inline-start: var(--context-menu-mac-padding) !important;
|
||||
#{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} {
|
||||
@include _layout_init_mac_text;
|
||||
}
|
||||
|
||||
/* Checkbox menuitem, None iconic menu */
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menuitem[type="checkbox"],
|
||||
:not(menu, #ContentSelectDropdown, #context-navigation) > menupopup > menu:not(.menu-iconic) {
|
||||
padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
|
||||
#{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} {
|
||||
@include _layout_init_mac_others;
|
||||
}
|
||||
|
||||
/* Global Menu */
|
||||
/* Disabled. some icons not appear
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"], .bookmark-item),
|
||||
menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)
|
||||
menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) {
|
||||
#{$_iconMenuPopupMenus} {
|
||||
list-style-image: var(--menuitem-image, url("../icons/blank.svg"));
|
||||
}
|
||||
*/
|
||||
|
||||
@ -0,0 +1,140 @@
|
||||
//-- Variables -----------------------------------------------------------------
|
||||
// Items
|
||||
// .menu-iconic, .menuitem-iconic: Alreay exist, not target.
|
||||
// .in-menulist: Not a range because it is a select menu of web content.
|
||||
// [checked="true"]: There should be a check mark instead of an icon.
|
||||
$_iconNoneCommon: ".in-menulist, [checked=\"true\"]";
|
||||
$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})";
|
||||
$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})";
|
||||
|
||||
// Components
|
||||
$_nestedPopupIcon: ":not(menu, #ContentSelectDropdown) > menupopup >";
|
||||
$_nestedPopupPadding: ":not(menu, #ContentSelectDropdown, #context-navigation) > menupopup >";
|
||||
$_iconMenuPopup: "menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup)";
|
||||
|
||||
$_nestedPopupIconMenus: selector.nest(
|
||||
$_nestedPopupIcon,
|
||||
"#{$_iconMenuitem}, #{$_iconMenu}"
|
||||
);
|
||||
$_nestedPopupPaddingMenus: selector.nest(
|
||||
$_nestedPopupPadding,
|
||||
"#{$_iconMenuitem}, #{$_iconMenu}"
|
||||
);
|
||||
$_iconMenuPopupMenus: selector.nest(
|
||||
$_iconMenuPopup,
|
||||
"#{$_iconMenuitem}, #{$_iconMenu}"
|
||||
);
|
||||
|
||||
$_globalMenus: "#main-menubar > menu";
|
||||
$_libraryMenuitem: "menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > #{$_iconMenuitem}";
|
||||
$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > #{$_iconMenu}";
|
||||
$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem";
|
||||
$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar";
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
// Init Menu
|
||||
$_initialMenus: selector.append(
|
||||
"menupopup menuitem, menupopup menu",
|
||||
":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])"
|
||||
);
|
||||
@mixin _initial_menus() {
|
||||
-moz-appearance: none !important; /* Linux: menulist */
|
||||
}
|
||||
|
||||
// Icon
|
||||
@mixin _layout_icon_menus() {
|
||||
/* Color */
|
||||
-moz-context-properties: fill, fill-opacity !important;
|
||||
fill: currentColor !important;
|
||||
|
||||
/* Layout */
|
||||
background-size: 16px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-image: var(--menuitem-image);
|
||||
}
|
||||
|
||||
@mixin _layout_icon_native_menus() {
|
||||
@include NativeMenu {
|
||||
list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Padding
|
||||
@mixin _layout_root_padding() {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 5px;
|
||||
--context-menu-background-padding: var(--context-menu-background-padding-default);
|
||||
}
|
||||
}
|
||||
@mixin _layout_init_padding() {
|
||||
background-position: left var(--context-menu-background-padding) center !important;
|
||||
padding-inline-start: var(--context-menu-background-padding) !important;
|
||||
}
|
||||
|
||||
@mixin _layout_root_win7_8() {
|
||||
@include OS($win7) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 2px;
|
||||
}
|
||||
}
|
||||
@include OS($win8) {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin _layout_init_win7_8() {
|
||||
background-position: left var(--context-menu-background-padding) center !important;
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
@mixin _layout_root_win10() {
|
||||
:root {
|
||||
--context-menu-background-padding: 1em;
|
||||
--context-menu-text-padding: 24px; /* 16px + 8px */
|
||||
--menu-background-padding-default: calc(var(--context-menu-background-padding) + var(--context-menu-text-padding));
|
||||
}
|
||||
}
|
||||
@mixin _layout_init_win10() {
|
||||
padding-inline-start: var(--menu-background-padding-default) !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
@mixin _layout_root_linux() {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 6px;
|
||||
}
|
||||
}
|
||||
@mixin _layout_init_linux() {
|
||||
padding-inline-start: 3px;
|
||||
}
|
||||
|
||||
@mixin _layout_root_mac() {
|
||||
:root {
|
||||
--context-menu-background-padding-default: 10px;
|
||||
--context-menu-mac-padding: 21px;
|
||||
}
|
||||
}
|
||||
@mixin _layout_init_mac_width() {
|
||||
padding-inline-end: var(--context-menu-background-padding) !important;
|
||||
}
|
||||
@mixin _layout_init_mac_text() {
|
||||
padding-inline-start: var(--context-menu-mac-padding) !important;
|
||||
}
|
||||
@mixin _layout_init_mac_others() {
|
||||
padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important;
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
// @include OS($win) {
|
||||
// /* 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"]:not([checked="true"])
|
||||
// > .menu-iconic-left {
|
||||
// padding-inline-start: var(--context-menu-text-padding);
|
||||
// }
|
||||
// }
|
||||
@ -0,0 +1,90 @@
|
||||
@import "../icons/layout_menu_common";
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
$_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)";
|
||||
$_placesPopupSetMenus: selector.nest(
|
||||
$_placesPopupSet,
|
||||
"#{$_iconMenuitem}, #{$_iconMenu}"
|
||||
);
|
||||
|
||||
@mixin _library_contextMenu {
|
||||
#{$_placesPopupSetMenus},
|
||||
#{$_libraryMenuitem},
|
||||
#{$_libraryMenu} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
#{$_initialMenus} {
|
||||
@include _initial_menus;
|
||||
}
|
||||
|
||||
@include _library_contextMenu {
|
||||
@include _layout_icon_menus;
|
||||
}
|
||||
|
||||
/* For native context menus */
|
||||
#{$_nestedPopupIconMenus} {
|
||||
@include _layout_icon_native_menus;
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
@include _layout_root_padding;
|
||||
@include _library_contextMenu {
|
||||
@include _layout_init_padding;
|
||||
}
|
||||
|
||||
/* Padding - Windows */
|
||||
@include _layout_root_win7_8;
|
||||
@include OS($win7, $win8) {
|
||||
@include _library_contextMenu {
|
||||
@include _layout_init_win7_8();
|
||||
}
|
||||
}
|
||||
@include OS($win10) {
|
||||
@include _layout_root_win10;
|
||||
|
||||
@include _library_contextMenu {
|
||||
@include _layout_init_win10;
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Linux */
|
||||
@include OS($linux) {
|
||||
@include _layout_root_linux;
|
||||
|
||||
/* Contextmenu Checkbox Unset */
|
||||
#{$_placesPopupSet} menuitem[type="checkbox"] {
|
||||
margin-inline: 0 !important;
|
||||
> .menu-iconic-left > .menu-iconic-icon {
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
&:not([checked="true"]) > .menu-iconic-left > .menu-iconic-icon {
|
||||
border: none !important;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding - Mac */
|
||||
@include OS($mac) {
|
||||
@include _layout_root_mac;
|
||||
|
||||
/* context menu width */
|
||||
#{$_placesPopupSetMenus} {
|
||||
@include _layout_init_mac_width;
|
||||
|
||||
> .menu-text {
|
||||
/* text position */
|
||||
@include _layout_init_mac_text;
|
||||
}
|
||||
}
|
||||
|
||||
/* Checkbox menuitem, None iconic menu */
|
||||
#{$_placesPopupSet} menuitem[checked="true"],
|
||||
#{$_placesPopupSet} menu:not(.menu-iconic) {
|
||||
@include _layout_init_mac_others;
|
||||
}
|
||||
}
|
||||
@ -278,7 +278,7 @@ panelMenuBookmarkThisPage[starred] {
|
||||
#PanelUI-developer-tools-view .subviewbutton:nth-child(4) {
|
||||
list-style-image: url("../icons/window-dev-tools.svg");
|
||||
}
|
||||
/* Browser Content Toolbaox - */
|
||||
/* Browser Content Toolbox */
|
||||
#appmenu-developer-tools-view .subviewbutton:nth-child(5),
|
||||
#PanelUI-developer-tools-view .subviewbutton:nth-child(5) {
|
||||
list-style-image: url("../icons/command-frames.svg");
|
||||
@ -371,7 +371,7 @@ panelMenuBookmarkThisPage[starred] {
|
||||
}
|
||||
|
||||
#allTabsMenu-hiddenTabsButton {
|
||||
list-style-image: url("../icons/password-hide.svg");
|
||||
list-style-image: url("../icons/eye-hide.svg")
|
||||
}
|
||||
|
||||
#allTabsMenu-containerTabsView .subviewbutton:last-child {
|
||||
@ -398,6 +398,17 @@ panelMenuBookmarkThisPage[starred] {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* BMB_bookmarksToolbarPopup */
|
||||
#BMB_viewBookmarksToolbar {
|
||||
&[data-l10n-args='{"isVisible":true}'] {
|
||||
--menuitem-image: url("../icons/eye-hide.svg")
|
||||
}
|
||||
&[data-l10n-args='{"isVisible":false}'] {
|
||||
--menuitem-image: url("../icons/eye-show.svg")
|
||||
}
|
||||
}
|
||||
|
||||
/*= protections-popup ========================================================*/
|
||||
#protections-popup-settings-button > .protections-popup-settings-icon,
|
||||
#protections-popup-show-report-button > .protections-popup-show-report-icon {
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
}
|
||||
#context-viewsource-wrapLongLines {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("../icons/arrow-sort-down-lines.svg"); */
|
||||
--menuitem-image: url("../icons/arrow-sort-down-lines.svg");
|
||||
}
|
||||
|
||||
#context-viewsource-highlightSyntax {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("../icons/code.svg"); */
|
||||
--menuitem-image: url("../icons/code.svg");
|
||||
}
|
||||
|
||||
#spell-no-suggestions {
|
||||
@ -77,7 +77,7 @@
|
||||
}
|
||||
#context-media-loop {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("../icons/arrow-repeat-all.svg"); */
|
||||
--menuitem-image: url("../icons/arrow-repeat-all.svg");
|
||||
}
|
||||
#context-leave-dom-fullscreen {
|
||||
--menuitem-image: url("chrome://global/skin/media/fullscreenExitButton.svg");
|
||||
@ -97,7 +97,7 @@
|
||||
}
|
||||
#context-video-pictureinpicture {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg"); */
|
||||
--menuitem-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
|
||||
}
|
||||
|
||||
#context-reloadimage {
|
||||
@ -170,6 +170,9 @@
|
||||
--menuitem-image: url("../icons/undo.svg");
|
||||
}
|
||||
#context-redo {
|
||||
@include Option("userChrome.icon.menu.full") {
|
||||
--menuitem-image: url("../icons/redo.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#context-cut {
|
||||
@ -209,6 +212,7 @@
|
||||
|
||||
#spell-check-enabled {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/text-proofing-tools.svg");
|
||||
}
|
||||
#spell-add-dictionaries-main {
|
||||
--menuitem-image: url("../icons/book-add.svg");
|
||||
@ -239,7 +243,7 @@
|
||||
/* iconic */
|
||||
}
|
||||
|
||||
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
|
||||
@include NativeMenu {
|
||||
#context-back {
|
||||
--menuitem-image: url("chrome://browser/skin/back.svg");
|
||||
}
|
||||
|
||||
@ -0,0 +1,51 @@
|
||||
/*= downloadsContextMenu =====================================================*/
|
||||
.downloadPauseMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
|
||||
}
|
||||
.downloadResumeMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/media/play-fill.svg");
|
||||
}
|
||||
.downloadUnblockMenuItem {
|
||||
--menuitem-image: url("../icons/checkmark-circle.svg");
|
||||
}
|
||||
.downloadUseSystemDefaultMenuItem {
|
||||
--menuitem-image: url("chrome://browser/skin/open.svg");
|
||||
}
|
||||
.downloadAlwaysUseSystemDefaultMenuItem {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/folder-globe.svg");
|
||||
}
|
||||
.downloadAlwaysOpenSimilarFilesMenuItem {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/fluid.svg");
|
||||
}
|
||||
.downloadShowMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
|
||||
@include Option("userChrome.icon.library") {
|
||||
--menuitem-image: url("../icons/folder.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#downloadsContextMenu > menuitem {
|
||||
&.downloadOpenReferrerMenuItem,
|
||||
&[command="downloadsCmd_openReferrer"] {
|
||||
--menuitem-image: url("../icons/link-square.svg");
|
||||
}
|
||||
&.downloadCopyLocationMenuItem,
|
||||
&[command="downloadsCmd_copyLocation"] {
|
||||
--menuitem-image: url("../icons/link.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.downloadDeleteFileMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
|
||||
}
|
||||
.downloadRemoveFromHistoryMenuItem {
|
||||
--menuitem-image: url("../icons/eraser.svg");
|
||||
}
|
||||
#downloadsContextMenu > menuitem {
|
||||
&[command="downloadsCmd_clearList"],
|
||||
&[command="downloadsCmd_clearDownloads"] {
|
||||
--menuitem-image: url("../icons/broom.svg");
|
||||
}
|
||||
}
|
||||
@ -13,6 +13,7 @@
|
||||
/*= autohide-context =========================================================*/
|
||||
#autohide-context > menuitem[data-l10n-id="full-screen-autohide"] {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/eye-tracking-off.svg");
|
||||
}
|
||||
|
||||
#autohide-context > menuitem[data-l10n-id="full-screen-exit"] {
|
||||
@ -25,12 +26,14 @@
|
||||
}
|
||||
|
||||
/*= pageActionContextMenu ====================================================*/
|
||||
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.manageExtensionItem {
|
||||
.pageActionContextMenuItem.extensionPinned.extensionUnpinned {
|
||||
&.manageExtensionItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
|
||||
}
|
||||
.pageActionContextMenuItem.extensionPinned.extensionUnpinned.removeExtensionItem {
|
||||
.removeExtensionItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
|
||||
}
|
||||
}
|
||||
|
||||
/*= customizationPanelItemContextMenu ========================================*/
|
||||
#customizationPanelItemContextMenuUnpin {
|
||||
@ -56,47 +59,7 @@
|
||||
/*= downloads-button-autohide-panel ==========================================*/
|
||||
#downloads-button-autohide-checkbox {
|
||||
/* checkbox */
|
||||
}
|
||||
|
||||
/*= downloadsContextMenu =====================================================*/
|
||||
.downloadPauseMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/media/pause-fill.svg");
|
||||
}
|
||||
.downloadResumeMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/media/play-fill.svg");
|
||||
}
|
||||
.downloadUnblockMenuItem {
|
||||
--menuitem-image: url("../icons/checkmark-circle.svg");
|
||||
}
|
||||
.downloadUseSystemDefaultMenuItem {
|
||||
--menuitem-image: url("chrome://browser/skin/open.svg");
|
||||
}
|
||||
.downloadAlwaysUseSystemDefaultMenuItem {
|
||||
/* checkbox */
|
||||
}
|
||||
.downloadShowMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
|
||||
@include Option("userChrome.icon.library") {
|
||||
--menuitem-image: url("../icons/folder.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] {
|
||||
--menuitem-image: url("../icons/link-square.svg");
|
||||
}
|
||||
#downloadsContextMenu > menuitem[command="downloadsCmd_copyLocation"] {
|
||||
--menuitem-image: url("../icons/link.svg");
|
||||
}
|
||||
|
||||
.downloadDeleteFileMenuItem {
|
||||
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
|
||||
}
|
||||
.downloadRemoveFromHistoryMenuItem {
|
||||
--menuitem-image: url("../icons/eraser.svg");
|
||||
}
|
||||
#downloadsContextMenu > menuitem[command="downloadsCmd_clearList"],
|
||||
#downloadsContextMenu > menuitem[command="downloadsCmd_clearDownloads"] {
|
||||
--menuitem-image: url("../icons/broom.svg");
|
||||
--menuitem-image: url("../icons/eye-tracking-off.svg");
|
||||
}
|
||||
|
||||
/*= SyncedTabsSidebarContext =================================================*/
|
||||
@ -160,6 +123,9 @@
|
||||
--menuitem-image: url("../icons/undo.svg");
|
||||
}
|
||||
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_redo"] {
|
||||
@include Option("userChrome.icon.menu.full") {
|
||||
--menuitem-image: url("../icons/redo.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#urlbar-input-container .textbox-contextmenu menuitem[cmd="cmd_cut"] {
|
||||
@ -186,6 +152,9 @@
|
||||
--menuitem-image: url("../icons/undo.svg");
|
||||
}
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-redo"] {
|
||||
@include Option("userChrome.icon.menu.full") {
|
||||
--menuitem-image: url("../icons/redo.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.textbox-contextmenu > menuitem[data-l10n-id="text-action-cut"] {
|
||||
@ -212,37 +181,26 @@ menuitem.searchbar-clear-history {
|
||||
}
|
||||
|
||||
/*= context_sendTabToDevicePopupMenu =========================================*/
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType="phone"] {
|
||||
.sync-menuitem.sendtab-target {
|
||||
&[clientType="phone"] {
|
||||
--menuitem-image: url("chrome://browser/skin/device-phone.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType="tablet"] {
|
||||
&[clientType="tablet"] {
|
||||
--menuitem-image: url("chrome://browser/skin/device-tablet.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType="desktop"] {
|
||||
&[clientType="desktop"] {
|
||||
--menuitem-image: url("chrome://browser/skin/device-desktop.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType="tv"] {
|
||||
&[clientType="tv"] {
|
||||
--menuitem-image: url("chrome://browser/skin/device-tv.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType="vr"] {
|
||||
&[clientType="vr"] {
|
||||
--menuitem-image: url("chrome://browser/skin/device-vr.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target[clientType=""] {
|
||||
&[clientType=""] {
|
||||
--menuitem-image: url("../icons/send-to-device.svg");
|
||||
}
|
||||
|
||||
menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup)
|
||||
> .sync-menuitem.sendtab-target:not([clientType]) {
|
||||
&:not([clientType]) {
|
||||
--menuitem-image: url("chrome://global/skin/icons/settings.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,9 @@
|
||||
#placesContext_openLinks\:tabs {
|
||||
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
|
||||
}
|
||||
#placesContext_open\:newcontainertab {
|
||||
--menuitem-image: url("../icons/container-openin-16.svg");
|
||||
}
|
||||
#placesContext_open\:newwindow {
|
||||
--menuitem-image: url("chrome://browser/skin/window.svg");
|
||||
}
|
||||
@ -49,6 +52,7 @@
|
||||
#placesContext_new\:bookmark {
|
||||
--menuitem-image: url("chrome://browser/skin/bookmark.svg");
|
||||
}
|
||||
#placesContext_showInFolder,
|
||||
#placesContext_new\:folder {
|
||||
--menuitem-image: url("chrome://global/skin/icons/folder.svg");
|
||||
@include Option("userChrome.icon.library") {
|
||||
@ -68,7 +72,7 @@
|
||||
}
|
||||
#show-other-bookmarks_PersonalToolbar {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("../icons/star-line-horizontal.svg"); */
|
||||
--menuitem-image: url("../icons/star-line-horizontal.svg");
|
||||
}
|
||||
#placesContext_showAllBookmarks {
|
||||
--menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg");
|
||||
|
||||
@ -44,6 +44,12 @@
|
||||
/* At windows */
|
||||
--menuitem-image: url("../icons/share.svg");
|
||||
}
|
||||
@include Option("userChrome.icon.menu.full") {
|
||||
#context_shareTabURL, /* Legacy */
|
||||
menuitem.share-tab-url-item {
|
||||
--menuitem-image: url("../icons/share.svg");
|
||||
}
|
||||
}
|
||||
#context_reopenInContainer {
|
||||
--menuitem-image: url("../icons/container-openin-16.svg");
|
||||
}
|
||||
@ -85,12 +91,18 @@
|
||||
.customize-context-moveToPanel {
|
||||
--menuitem-image: url("chrome://browser/skin/pin-12.svg");
|
||||
}
|
||||
.toolbar-context-autohide-downloads-button {
|
||||
--menuitem-image: url("../icons/password-hide.svg");
|
||||
#toolbar-context-autohide-downloads-button {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/eye-tracking-off.svg");
|
||||
}
|
||||
.customize-context-removeFromToolbar {
|
||||
--menuitem-image: url("chrome://global/skin/icons/delete.svg");
|
||||
}
|
||||
|
||||
#toolbar-context-always-open-downloads-panel {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/drawer-arrow-download.svg");
|
||||
}
|
||||
#toolbar-context-openANewTab {
|
||||
--menuitem-image: url("chrome://browser/skin/new-tab.svg");
|
||||
}
|
||||
@ -112,7 +124,7 @@
|
||||
|
||||
#toggle_toolbar-menubar {
|
||||
/* checkbox */
|
||||
/* --menuitem-image: url("../icons/calendar-agenda.svg"); */
|
||||
--menuitem-image: url("../icons/calendar-agenda.svg");
|
||||
}
|
||||
#toggle_PersonalToolbar {
|
||||
/* Also placeContext */
|
||||
@ -122,3 +134,11 @@
|
||||
menuitem.viewCustomizeToolbar {
|
||||
--menuitem-image: url("chrome://browser/skin/customize.svg");
|
||||
}
|
||||
|
||||
.fullscreen-context-autohide {
|
||||
/* checkbox */
|
||||
--menuitem-image: url("../icons/eye-tracking-off.svg");
|
||||
}
|
||||
#toolbar-context-menu > menuitem[data-l10n-id="full-screen-exit"] {
|
||||
--menuitem-image: url("chrome://browser/skin/fullscreen-exit.svg");
|
||||
}
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
@use "utils/option" as *;
|
||||
@use "utils/color_scheme" as *;
|
||||
@use "utils/theme" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
@use "utils/os" as *;
|
||||
@use "utils/option" as *;
|
||||
@use "utils/color_scheme" as *;
|
||||
@use "utils/native_menu" as *;
|
||||
@use "utils/proton_elements" as Proton;
|
||||
@use "sass:selector";
|
||||
|
||||
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
||||
@namespace html url("http://www.w3.org/1999/xhtml");
|
||||
@ -29,3 +32,11 @@
|
||||
@include Option("userContent.page.proton") {
|
||||
@import "contents/proton_contents";
|
||||
}
|
||||
|
||||
/** Menu - Icons Layout *******************************************************/
|
||||
@include Option("userChrome.icon.menu") {
|
||||
@import "contents/context_menu";
|
||||
}
|
||||
|
||||
/** Download Panel ************************************************************/
|
||||
@import "contents/downloads";
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
@import "standard_folder";
|
||||
@import "inbox";
|
||||
@import "default_override";
|
||||
@import "default_open";
|
||||
@import "folder_icons";
|
||||
|
||||
@-moz-document url("chrome://browser/content/places/places.xhtml")
|
||||
{
|
||||
|
||||
@ -2,18 +2,10 @@
|
||||
{
|
||||
/** Library - Icons Replace *************************************************/
|
||||
@include Option("userChrome.icon.library") {
|
||||
@import "standard_folder";
|
||||
@import "inbox";
|
||||
@import "default_override";
|
||||
@import "default_open";
|
||||
@import "folder_icons";
|
||||
@import "menubar";
|
||||
}
|
||||
|
||||
/*= Context Menu ===========================================================*/
|
||||
@include Option("userChrome.icon.context_menu") {
|
||||
@import "contents_menu";
|
||||
}
|
||||
|
||||
@include OS($linux) {
|
||||
/*= Layout Fixes =========================================================*/
|
||||
menupopup menu {
|
||||
|
||||
@ -0,0 +1,131 @@
|
||||
/*= Standard Folder - More Visible ===========================================*/
|
||||
/* on Toolbar and Menus */
|
||||
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu) .bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer]),
|
||||
/* in Sidebar, Library, Add/Edit Bookmark dialog */
|
||||
/* https://github.com/rillian/firefox/blob/1f88437d263f56bdede4f20f69ba9c7b62f57001/layout/style/nsCSSAnonBoxList.h#L85-L98 */
|
||||
/* Need to overide!!, can not use :not() */
|
||||
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, container),
|
||||
#editBMPanel_folderMenuList:not([selectedGuid="toolbar_____"], [selectedGuid="menu________"]),
|
||||
#editBMPanel_folderMenuList .folder-icon:not([id]),
|
||||
/* Download Popup */
|
||||
.downloadIconShow > .button-box > .button-icon {
|
||||
list-style-image: url("../icons/folder.svg") !important;
|
||||
}
|
||||
|
||||
/* Standard Folder - Open */
|
||||
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
|
||||
.bookmark-item[container="true"]:not([query="true"], [tagContainer], [dayContainer])[open="true"],
|
||||
:-moz-any(#bookmarks-view, #historyTree, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(title, container, open) {
|
||||
list-style-image: url("../icons/folder-open.svg") !important;
|
||||
}
|
||||
|
||||
/*= Other Folder - Inbox Icon ================================================*/
|
||||
/* on Menus */
|
||||
#PlacesToolbar #OtherBookmarks,
|
||||
#BMB_bookmarksPopup #BMB_unsortedBookmarks,
|
||||
#bookmarksMenuPopup #menu_unsortedBookmarks,
|
||||
/* Other Bookmarks -- in Sidebar, Library, Add/Edit Bookmark dialog */
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_unfiled_____),
|
||||
#editBMPanel_unfiledRootItem,
|
||||
#editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
|
||||
list-style-image: url("../icons/mail-inbox-all.svg") !important;
|
||||
}
|
||||
|
||||
/* Other Folder - Open */
|
||||
#PlacesToolbar #OtherBookmarks[open="true"],
|
||||
#BMB_bookmarksPopup #BMB_unsortedBookmarks[open="true"],
|
||||
#bookmarksMenuPopup #menu_unsortedBookmarks[open="true"],
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(container, open, OrganizerQuery_UnfiledBookmarks),
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(container, open, queryFolder_unfiled_____) {
|
||||
list-style-image: url("../icons/mail-inbox.svg") !important;
|
||||
}
|
||||
|
||||
/*= Default Icon - Override ===================================================*/
|
||||
/* https://github.com/mozilla/gecko-dev/blob/master/browser/themes/shared/places/tree-icons.css */
|
||||
|
||||
/* Query */
|
||||
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query) {
|
||||
list-style-image: url("chrome://browser/skin/places/folder-smart.svg") !important;
|
||||
}
|
||||
|
||||
/* History */
|
||||
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, dayContainer),
|
||||
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
|
||||
list-style-image: url("chrome://browser/skin/history.svg") !important;
|
||||
}
|
||||
|
||||
/* Downloads */
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
|
||||
list-style-image: url("chrome://browser/skin/downloads/downloads.svg") !important;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, tagContainer),
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
|
||||
list-style-image: url("chrome://browser/skin/places/tag.svg") !important;
|
||||
}
|
||||
|
||||
/* Boomark */
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
|
||||
list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
|
||||
}
|
||||
|
||||
/* Bookmark Toolbar */
|
||||
#BMB_bookmarksPopup #BMB_bookmarksToolbar, /* Original: Default folder icon */
|
||||
#bookmarksMenuPopup #bookmarksToolbarFolderMenu, /* Original: Default folder icon */
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent) treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
|
||||
list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
|
||||
}
|
||||
|
||||
/* Bookmark Menu */
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(container, queryFolder_menu________) {
|
||||
list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
|
||||
}
|
||||
|
||||
/*= Default Icon - Open ======================================================*/
|
||||
/* Query */
|
||||
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
|
||||
.bookmark-item[container="true"][query="true"]:not([tagContainer])[open="true"]
|
||||
> .menu-iconic-left
|
||||
> .menu-iconic-icon {
|
||||
transform: rotate(15deg) !important;
|
||||
}
|
||||
|
||||
/* History */
|
||||
:-moz-any(#historyTree, #placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, dayContainer),
|
||||
:-moz-any(#historyTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(query, open, OrganizerQuery_history____v) {
|
||||
list-style-image: url("../icons/history-reverse.svg") !important;
|
||||
}
|
||||
|
||||
/* Tag */
|
||||
:-moz-any(#PlacesToolbar, #BMB_bookmarksPopup, #bookmarksMenu)
|
||||
.bookmark-item[container="true"][tagContainer="true"][open="true"],
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(title, query, open, tagContainer),
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_tags_______v) {
|
||||
list-style-image: url("../icons/tag-open.svg") !important;
|
||||
}
|
||||
|
||||
/* Boomark */
|
||||
:-moz-any(#placesList, #placeContent) treechildren::-moz-tree-image(query, open, OrganizerQuery_allbms_____v) {
|
||||
list-style-image: url("chrome://browser/skin/bookmark-hollow.svg") !important;
|
||||
}
|
||||
|
||||
/* Bookmark Toolbar */
|
||||
#BMB_bookmarksPopup #BMB_bookmarksToolbar[open="true"],
|
||||
#bookmarksMenuPopup #bookmarksToolbarFolderMenu[open="true"],
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(container, open, queryFolder_toolbar_____) {
|
||||
list-style-image: url("../icons/bookmarksToolbar-open.svg") !important;
|
||||
}
|
||||
|
||||
/* Bookmark Menu */
|
||||
:-moz-any(#bookmarks-view, #editBMPanel_folderTree, #placesList, #placeContent)
|
||||
treechildren::-moz-tree-image(container, open, queryFolder_menu________) {
|
||||
list-style-image: url("../icons/bookmarksMenu-open.svg") !important; /* or bookmarksMenu-open2.svg" */
|
||||
}
|
||||
@ -21,10 +21,8 @@
|
||||
--organizer-toolbar-field-focus-border-color: var(--organizer-outline-color);
|
||||
--organizer-toolbar-field-focus-box-shadow: unset;
|
||||
--organizer-pane-field-border-color: ThreeDShadow;
|
||||
}
|
||||
|
||||
@include NotContrast {
|
||||
:root {
|
||||
--organizer-color: var(--in-content-page-color);
|
||||
--organizer-deemphasized-color: var(--in-content-deemphasized-text);
|
||||
|
||||
@ -51,10 +49,8 @@
|
||||
);
|
||||
--organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23);
|
||||
--organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent);
|
||||
}
|
||||
|
||||
@include Dark {
|
||||
:root {
|
||||
--organizer-color: rgb(251, 251, 254);
|
||||
--organizer-deemphasized-color: rgb(191, 191, 201);
|
||||
|
||||
@ -80,26 +76,24 @@
|
||||
border-bottom: 1px solid var(--organizer-border-color) !important;
|
||||
padding: 4px !important;
|
||||
padding-inline-end: 6px !important;
|
||||
}
|
||||
|
||||
#placesToolbar > toolbarbutton {
|
||||
> toolbarbutton {
|
||||
appearance: none !important;
|
||||
padding: 5px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
#placesToolbar > toolbarbutton[disabled] {
|
||||
&[disabled] {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
#placesToolbar > toolbarbutton:not([disabled]):hover {
|
||||
&:not([disabled]):hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
#placesToolbar > toolbarbutton:not([disabled]):hover:active {
|
||||
&:active {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#placesToolbar > toolbarbutton > .toolbarbutton-icon,
|
||||
#placesMenu > menu > image,
|
||||
@ -110,33 +104,31 @@
|
||||
|
||||
#placesMenu {
|
||||
margin-inline-start: 6px !important;
|
||||
}
|
||||
|
||||
#placesMenu > menu {
|
||||
> menu {
|
||||
appearance: none !important;
|
||||
color: var(--organizer-color) !important;
|
||||
border-radius: 4px !important;
|
||||
padding-block: 5px !important;
|
||||
padding-inline-start: 5px !important;
|
||||
margin-inline-end: 2px !important;
|
||||
}
|
||||
|
||||
#placesMenu > menu[_moz-menuactive="true"],
|
||||
#placesMenu > menu:hover {
|
||||
&[_moz-menuactive="true"],
|
||||
&:hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
#placesMenu > menu:hover:active,
|
||||
#placesMenu > menu[open] {
|
||||
&:hover:active,
|
||||
&[open] {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
color: var(--organizer-selected-color) !important;
|
||||
}
|
||||
|
||||
#placesMenu > menu > .menubar-text {
|
||||
> .menubar-text {
|
||||
margin-block: 0 !important; /* override menu.css */
|
||||
padding-inline-end: 4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*- Search Bar & Input ---------------------------------------------------*/
|
||||
#searchFilter,
|
||||
@ -221,12 +213,11 @@ treecol:not([hideheader="true"], [sortable="false"]):hover,
|
||||
treecolpicker:hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-color) !important;
|
||||
}
|
||||
|
||||
treecol:not([hideheader="true"], [sortable="false"]):hover:active,
|
||||
treecolpicker:hover:active {
|
||||
&:active {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
}
|
||||
}
|
||||
|
||||
treecol:not([hideheader="true"], :first-child),
|
||||
treecolpicker {
|
||||
@ -250,44 +241,41 @@ treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection {
|
||||
height: 18px !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row {
|
||||
treechildren {
|
||||
&::-moz-tree-row {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover) {
|
||||
&::-moz-tree-row(hover) {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(selected) {
|
||||
&::-moz-tree-row(selected) {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
color: var(--organizer-selected-color) !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(hover),
|
||||
treechildren::-moz-tree-twisty(hover),
|
||||
treechildren::-moz-tree-cell-text(hover) {
|
||||
&::-moz-tree-image(hover),
|
||||
&::-moz-tree-twisty(hover),
|
||||
&::-moz-tree-cell-text(hover) {
|
||||
color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-image(selected),
|
||||
treechildren::-moz-tree-twisty(selected),
|
||||
treechildren::-moz-tree-cell-text(selected) {
|
||||
&::-moz-tree-image(selected),
|
||||
&::-moz-tree-twisty(selected),
|
||||
&::-moz-tree-cell-text(selected) {
|
||||
color: var(--organizer-selected-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-separator {
|
||||
&::-moz-tree-separator {
|
||||
height: 1px !important;
|
||||
border-color: var(--organizer-separator-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-separator(hover) {
|
||||
&::-moz-tree-separator(hover) {
|
||||
border-color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-separator(selected) {
|
||||
&::-moz-tree-separator(selected) {
|
||||
border-color: var(--organizer-selected-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Info Box -------------------------------------------------------------*/
|
||||
#detailsPane {
|
||||
@ -308,36 +296,35 @@ treechildren::-moz-tree-separator(selected) {
|
||||
border-radius: 4px !important;
|
||||
color: var(--organizer-color) !important;
|
||||
background-color: var(--organizer-content-background) !important;
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up:hover,
|
||||
#editBookmarkPanelRows .expander-down:hover {
|
||||
&:hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up:hover:active,
|
||||
#editBookmarkPanelRows .expander-down:hover:active {
|
||||
&:active {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
color: var(--organizer-selected-color) !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up:focus-visible,
|
||||
#editBookmarkPanelRows .expander-down:focus-visible {
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--organizer-outline-color) !important;
|
||||
outline-offset: -1px !important;
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
|
||||
> .button-box {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#editBookmarkPanelRows .expander-up > .button-box,
|
||||
#editBookmarkPanelRows .expander-down > .button-box {
|
||||
padding: 0 !important;
|
||||
#editBookmarkPanelRows {
|
||||
.expander-up {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
|
||||
}
|
||||
.expander-down {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
|
||||
}
|
||||
}
|
||||
|
||||
#places input {
|
||||
@ -347,16 +334,15 @@ treechildren::-moz-tree-separator(selected) {
|
||||
color: var(--organizer-color) !important;
|
||||
min-height: 20px !important;
|
||||
padding-inline: 4px !important;
|
||||
}
|
||||
|
||||
#places input:focus {
|
||||
&:focus {
|
||||
outline: 2px solid var(--organizer-outline-color) !important;
|
||||
outline-offset: -1px !important;
|
||||
}
|
||||
|
||||
#places input:not(:read-write):focus {
|
||||
&:not(:read-write):focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.caption-label {
|
||||
margin-inline-start: 8px !important;
|
||||
@ -369,18 +355,17 @@ treechildren::-moz-tree-separator(selected) {
|
||||
background-color: var(--organizer-content-background) !important;
|
||||
border: 1px solid var(--organizer-border-color) !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem {
|
||||
> richlistitem {
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover {
|
||||
&:hover {
|
||||
background-color: var(--organizer-hover-background) !important;
|
||||
color: var(--organizer-hover-color) !important;
|
||||
}
|
||||
|
||||
#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] {
|
||||
&[selected] {
|
||||
background-color: var(--organizer-selected-background) !important;
|
||||
color: var(--organizer-selected-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,173 +1,102 @@
|
||||
$iconSelector: "> .menu-iconic-left > .menu-iconic-icon";
|
||||
$checkedIconSelector: "> .menu-iconic-left[checked=\"true\"] > .menu-iconic-icon";
|
||||
|
||||
/*- Radio Button ---------------------------------------------------------*/
|
||||
menuitem[type="radio"] {
|
||||
/* margin-inline-start: 0 !important; */
|
||||
appearance: none !important;
|
||||
@include Proton.RadioGlobal;
|
||||
|
||||
#{$iconSelector} {
|
||||
@include Proton.RadioIcon;
|
||||
}
|
||||
#{$checkedIconSelector} {
|
||||
@include Proton.RadioCheckedIcon;
|
||||
}
|
||||
|
||||
menuitem[type="radio"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
appearance: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid var(--in-content-box-border-color) !important;
|
||||
border-radius: 100% !important;
|
||||
margin-block: 2px !important; /* extend the vertical clicktarget */
|
||||
margin-inline: 0 6px !important;
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
background-position: center !important;
|
||||
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
|
||||
&:not([disabled="true"]):hover {
|
||||
#{$iconSelector} {
|
||||
@include Proton.RadioIconHover;
|
||||
}
|
||||
&:active #{$iconSelector} {
|
||||
@include Proton.RadioIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
menuitem[type="radio"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(--in-content-button-background-hover) !important;
|
||||
color: var(--in-content-button-text-color-hover) !important;
|
||||
&:not([disabled="true"])[checked="true"]:hover {
|
||||
#{$iconSelector} {
|
||||
@include Proton.RadioCheckedIconHover;
|
||||
}
|
||||
&:active #{$iconSelector} {
|
||||
@include Proton.RadioCheckedIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(--in-content-button-background-active) !important;
|
||||
> .menu-iconic-text {
|
||||
@include Proton.RadioLabel;
|
||||
}
|
||||
|
||||
menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background-color: var(--in-content-primary-button-background) !important;
|
||||
background-image: url("chrome://global/skin/icons/radio.svg") !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(--in-content-primary-button-background-hover) !important;
|
||||
color: var(--in-content-primary-button-text-color-hover) !important;
|
||||
}
|
||||
|
||||
menuitem[type="radio"]:not([disabled="true"])[checked="true"]:hover:active > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(--in-content-primary-button-background-active) !important;
|
||||
}
|
||||
|
||||
menuitem[type="radio"] > .menu-iconic-text {
|
||||
margin-inline: 0 8px !important;
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
/* Disabled checkboxes, radios and labels */
|
||||
menuitem[type="radio"][disabled="true"],
|
||||
menuitem[type="checkbox"][disabled="true"] {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
menuitem[type="radio"][disabled="true"],
|
||||
menuitem[type="checkbox"][disabled="true"] {
|
||||
opacity: 0.5 !important;
|
||||
@include Proton.DisabledMenuItem;
|
||||
}
|
||||
|
||||
/*- Check Box ------------------------------------------------------------*/
|
||||
/* From checkbox.css */
|
||||
menuitem[type="checkbox"] {
|
||||
appearance: none !important;
|
||||
-moz-box-align: center !important;
|
||||
margin: 0px 2px !important;
|
||||
@include Proton.CheckboxGlobal(true);
|
||||
|
||||
#{$iconSelector} {
|
||||
@include Proton.CheckboxIcon;
|
||||
}
|
||||
#{$checkedIconSelector} {
|
||||
@include Proton.CheckboxCheckedIcon;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
margin-inline-end: 2px !important;
|
||||
&:not([disabled="true"]):hover {
|
||||
#{$iconSelector} {
|
||||
@include Proton.CheckboxIconHover;
|
||||
}
|
||||
menuitem[type="checkbox"] > .menu-iconic-text {
|
||||
margin: 1px 0 !important;
|
||||
&:active #{$iconSelector} {
|
||||
@include Proton.CheckboxIconActive;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"][disabled="true"] {
|
||||
opacity: 0.4 !important;
|
||||
#{$checkedIconSelector} {
|
||||
@include Proton.CheckboxCheckedIconHover;
|
||||
}
|
||||
&:active #{$checkedIconSelector} {
|
||||
@include Proton.CheckboxCheckedIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
appearance: none !important;
|
||||
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
|
||||
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
|
||||
border: 1px solid currentColor !important;
|
||||
border-radius: 2px !important;
|
||||
margin-inline-end: 6px !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 4%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-active-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 8%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
border-color: var(--checkbox-checked-border-color, transparent) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !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, -moz-accent-color-foreground) !important;
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
|
||||
> .menu-iconic-left[checked="true"]
|
||||
> .menu-iconic-icon {
|
||||
background-color: var(
|
||||
--checkbox-checked-active-bgcolor,
|
||||
color-mix(in srgb, currentColor 25%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:focus > .menu-iconic-left > .menu-iconic-icon {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
&:focus #{$iconSelector} {
|
||||
@include Proton.CheckboxFocusRing;
|
||||
}
|
||||
|
||||
@include Contrast {
|
||||
menuitem[type="checkbox"]:not([disabled="true"]) > .menu-iconic-left > .menu-iconic-icon {
|
||||
/* color will set the border-color on the check due to how HCM works for in-content pages. */
|
||||
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
|
||||
&:not([disabled="true"]) #{$iconSelector} {
|
||||
@include Proton.CheckboxIconHoverContrast;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] {
|
||||
color: var(--checkbox-checked-border-color, currentColor) !important;
|
||||
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
> .menu-iconic-left[checked="true"] {
|
||||
@include Proton.CheckboxCheckedIconContrast;
|
||||
}
|
||||
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover:active
|
||||
> .menu-iconic-left[checked="true"]
|
||||
> .menu-iconic-icon,
|
||||
menuitem[type="checkbox"]:not([disabled="true"]):hover > .menu-iconic-left[checked="true"] > .menu-iconic-icon {
|
||||
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
&:not([disabled="true"]):hover:active,
|
||||
&:not([disabled="true"]):hover {
|
||||
#{$checkedIconSelector} {
|
||||
@include Proton.CheckboxCheckedIconHoverContrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* From common.css */
|
||||
menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon {
|
||||
margin-block: 2px !important;
|
||||
> .menu-iconic-text {
|
||||
@include Proton.ChexboxLabel;
|
||||
}
|
||||
|
||||
&[disabled="true"] {
|
||||
@include Proton.DisabledChexbox;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Menu Separtor --------------------------------------------------------*/
|
||||
@ -175,8 +104,10 @@ menuseparator {
|
||||
appearance: none !important;
|
||||
min-width: 2px;
|
||||
min-height: 0;
|
||||
|
||||
border-top: 1px solid var(--in-content-box-border-color, ThreeDDarkShadow);
|
||||
border-bottom: none;
|
||||
margin: var(--panel-separator-margin, 6px);
|
||||
|
||||
padding: 0;
|
||||
margin: var(--panel-separator-margin, 6px);
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
--space-above-tabbar: 8px; /* If the option is not specified, it is equivalent to 0px. */
|
||||
}
|
||||
|
||||
@mixin dragSpaceHeight {
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _dragSpaceHeight {
|
||||
:root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
|
||||
@content;
|
||||
}
|
||||
@ -14,7 +15,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin dragSpacePadding {
|
||||
@mixin _dragSpacePadding {
|
||||
/* Add extra space to titlebar for dragging */
|
||||
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
|
||||
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
|
||||
@ -28,13 +29,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include OS($win10) {
|
||||
@include dragSpaceHeight {
|
||||
@include _dragSpaceHeight {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
|
||||
}
|
||||
}
|
||||
@include OS($win7, $win8, $linux) {
|
||||
@include dragSpaceHeight {
|
||||
@include _dragSpaceHeight {
|
||||
height: calc(var(--tab-min-height) + var(--space-above-tabbar));
|
||||
}
|
||||
}
|
||||
@ -46,12 +49,12 @@
|
||||
}
|
||||
@include OS($win7) {
|
||||
/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
|
||||
@include dragSpacePadding {
|
||||
@include _dragSpacePadding {
|
||||
padding-top: calc(var(--space-above-tabbar) + 4px) !important;
|
||||
}
|
||||
}
|
||||
@include OS($win8, $win10, $linux) {
|
||||
@include dragSpacePadding {
|
||||
@include _dragSpacePadding {
|
||||
padding-top: var(--space-above-tabbar) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
--uc-close-button-padding: 4px;
|
||||
}
|
||||
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin pinnedCloseButtonShow($prefix: "") {
|
||||
#{$prefix}:not([busy]) .tab-close-button {
|
||||
display: -moz-box !important;
|
||||
@ -33,6 +34,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
.tabbrowser-tab[pinned] {
|
||||
@include pinnedCloseButtonShow("&[visuallyselected]:not([style*='transform: translateX']):hover");
|
||||
@include pinnedIconStackLayout("&[visuallyselected]:not([style*='transform: translateX']):hover");
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@mixin separatorShape() {
|
||||
//-- Mixin ---------------------------------------------------------------------
|
||||
@mixin _dynamicSeparatorShape() {
|
||||
/* Box Model */
|
||||
content: "";
|
||||
display: block;
|
||||
@ -20,6 +21,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
@include Option("userChrome.tab.newtab_button_like_tab") {
|
||||
#tabbrowser-arrowscrollbox {
|
||||
position: absolute;
|
||||
@ -27,7 +30,7 @@
|
||||
|
||||
.tab-background::before,
|
||||
#tabs-newtab-button::before {
|
||||
@include separatorShape;
|
||||
@include _dynamicSeparatorShape;
|
||||
|
||||
/* More position */
|
||||
transform: translateX(-2.5px) translateY(calc(-50% + 1px));
|
||||
@ -39,7 +42,7 @@
|
||||
#tabbrowser-arrowscrollbox:not([overflowing])
|
||||
.tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab]
|
||||
.tab-background::after {
|
||||
@include separatorShape;
|
||||
@include _dynamicSeparatorShape;
|
||||
}
|
||||
|
||||
.tab-background::before {
|
||||
|
||||
@ -40,10 +40,11 @@ html#main-window menupopup:not(.in-menulist) {
|
||||
*/
|
||||
}
|
||||
|
||||
/* Fallback background */
|
||||
/* Fallback background - Set to Legacy. It will be removed Next update
|
||||
menupopup:not(.cui-widget-panel.cui-widget-panelview, [placespopup="true"]) {
|
||||
background-color: var(--lwt-accent-color, var(--in-content-page-background)) !important;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
/* Default theme color preservation */
|
||||
@ -66,6 +67,28 @@ html#main-window menupopup:not(.in-menulist) {
|
||||
}
|
||||
}
|
||||
|
||||
/*== Info Bar Color ==========================================================*/
|
||||
.container.infobar {
|
||||
background-color: var(--urlbar-box-bgcolor);
|
||||
}
|
||||
.notification-button {
|
||||
background-color: var(--button-bgcolor);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-hover-bgcolor);
|
||||
}
|
||||
&:hover:active {
|
||||
background-color: var(--button-active-bgcolor);
|
||||
}
|
||||
}
|
||||
|
||||
html|button.ghost-button:not(.semi-transparent):enabled:hover {
|
||||
background-color: var(--button-hover-bgcolor) !important;
|
||||
}
|
||||
html|button.ghost-button:not(.semi-transparent):enabled:hover:active {
|
||||
background-color: var(--in-content-button-background-active) !important;
|
||||
}
|
||||
|
||||
/*== Bookmark Popup Color ====================================================*/
|
||||
#editBMPanel_folderTree:-moz-lwtheme,
|
||||
#editBMPanel_tagsSelector:-moz-lwtheme {
|
||||
@ -151,34 +174,36 @@ body:not([lwt-sidebar]) xul|search-textbox.tabsFilter[focused="true"] {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
clip-path: inset(0 round var(--panel-border-radius));
|
||||
}
|
||||
|
||||
#PopupAutoComplete > richlistbox {
|
||||
> richlistbox {
|
||||
border-radius: var(--panel-border-radius) !important;
|
||||
background-color: var(--panel-bgcolor) !important; /* Original: Field */
|
||||
color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FiledText */
|
||||
}
|
||||
}
|
||||
.autocomplete-richlistitem:hover {
|
||||
background-color: var(--arrowpanel-dimmed) !important;
|
||||
}
|
||||
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
|
||||
#PopupAutoComplete > richlistbox > richlistitem {
|
||||
&[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon,
|
||||
&[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon,
|
||||
&[originaltype="login"] > .ac-site-icon {
|
||||
fill: GrayText !important;
|
||||
}
|
||||
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
|
||||
&[originaltype="loginsFooter"] {
|
||||
--panel-border-color: var(--panel-bgcolor);
|
||||
color: var(--arrowpanel-color, var(--in-content-page-color)) !important; /* Original: FieldText */
|
||||
background-color: var(--arrowpanel-dimmed, hsla(0, 0%, 80%, 0.35)) !important; /* Original: hsla(0,0%,80%,.35) */
|
||||
border-color: var(--panel-border-color) !important; /* Original: rgba(38,38,38,.15) */
|
||||
}
|
||||
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"]:hover,
|
||||
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"][selected] {
|
||||
&[originaltype="loginsFooter"]:hover,
|
||||
&[originaltype="loginsFooter"][selected] {
|
||||
background-color: var(
|
||||
--arrowpanel-dimmed-further,
|
||||
hsla(0, 0%, 80%, 0.5)
|
||||
) !important; /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,8 +65,9 @@ browser[type="content"] > html {
|
||||
}
|
||||
#alertSettings > .button-box > .box-inherit {
|
||||
margin: -4px 4px 3px 0 !important;
|
||||
}
|
||||
#alertSettings > .button-box > .box-inherit > .button-icon {
|
||||
|
||||
> .button-icon {
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,12 +15,11 @@
|
||||
|
||||
/* This button needs to align with the tree above it. */
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
|
||||
#editBMPanel_newFolderButton:hover {
|
||||
&:hover {
|
||||
background-color: var(--button-hover-bgcolor);
|
||||
}
|
||||
|
||||
#editBMPanel_newFolderButton:hover:active {
|
||||
&:active {
|
||||
background-color: var(--button-active-bgcolor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,22 +21,24 @@
|
||||
font-size: inherit !important;
|
||||
padding: 8px !important;
|
||||
margin: 2px 4px !important;
|
||||
}
|
||||
#locationTextBox:focus {
|
||||
|
||||
&:focus {
|
||||
border-color: transparent !important;
|
||||
outline: 2px solid var(--in-content-focus-outline-color) !important;
|
||||
outline-offset: -1px !important; /* Prevents antialising around the corners */
|
||||
}
|
||||
#locationTextBox:-moz-ui-invalid {
|
||||
&:-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 */
|
||||
}
|
||||
#locationTextBox:disabled {
|
||||
&:disabled {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#exceptiondialog:first-child > hbox > vbox:not([flex="1"]) {
|
||||
#exceptiondialog:first-child > hbox > vbox {
|
||||
&:not([flex="1"]) {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
background-image: url("chrome://global/skin/icons/warning.svg") !important;
|
||||
@ -46,7 +48,8 @@
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
#exceptiondialog:first-child > hbox > vbox > image {
|
||||
> image {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,19 +9,7 @@
|
||||
border-radius: 8px !important;
|
||||
padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
|
||||
margin: 4px !important;
|
||||
}
|
||||
#viewGroup > radio:hover {
|
||||
background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
|
||||
}
|
||||
#viewGroup > radio[selected="true"] {
|
||||
color: var(--in-content-button-text-color) !important; /* SelectedItemText */
|
||||
background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
|
||||
}
|
||||
#viewGroup > radio {
|
||||
color: var(--in-content-deemphasized-text) !important; /* FieldText */
|
||||
}
|
||||
|
||||
#viewGroup > radio {
|
||||
list-style-image: none !important;
|
||||
background-image: var(--viewgroup-image) !important;
|
||||
background-repeat: no-repeat;
|
||||
@ -30,6 +18,14 @@
|
||||
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
color: var(--in-content-deemphasized-text) !important; /* FieldText */
|
||||
&:hover {
|
||||
background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
|
||||
}
|
||||
&[selected="true"] {
|
||||
color: var(--in-content-button-text-color) !important; /* SelectedItemText */
|
||||
background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
|
||||
}
|
||||
}
|
||||
#generalTab {
|
||||
--viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
|
||||
@ -48,9 +44,8 @@
|
||||
/* Overwrite */
|
||||
margin: 0 !important;
|
||||
padding: 0 6px !important;
|
||||
}
|
||||
|
||||
@include OS($mac) {
|
||||
#viewGroup > radio > .radio-label-box {
|
||||
padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
|
||||
}
|
||||
}
|
||||
@ -76,9 +71,9 @@
|
||||
-moz-appearance: none !important;
|
||||
background: var(--in-content-table-header-background) !important;
|
||||
color: var(--in-content-table-header-color) !important;
|
||||
}
|
||||
treecols > treecol,
|
||||
treecols > treecolpicker.treecol-image {
|
||||
|
||||
> treecol,
|
||||
> treecolpicker.treecol-image {
|
||||
-moz-appearance: none !important;
|
||||
color: var(--in-content-table-header-color) !important;
|
||||
background: var(--in-content-table-header-background) !important;
|
||||
@ -88,6 +83,7 @@
|
||||
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
tree,
|
||||
treechildren::-moz-tree-row {
|
||||
@ -96,32 +92,32 @@
|
||||
background-color: var(--in-content-table-background) !important;
|
||||
border: 1px solid var(--in-content-table-border-color) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(odd) {
|
||||
treechildren {
|
||||
&::-moz-tree-row(odd) {
|
||||
background-color: var(--in-content-box-background-odd) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-row(hover) {
|
||||
&::-moz-tree-row(hover) {
|
||||
color: var(--in-content-item-hover-text) !important;
|
||||
background-color: var(--in-content-item-hover) !important;
|
||||
}
|
||||
treechildren::-moz-tree-row(selected) {
|
||||
&::-moz-tree-row(selected) {
|
||||
background-color: var(--in-content-item-selected) !important;
|
||||
}
|
||||
|
||||
treechildren::-moz-tree-cell {
|
||||
&::-moz-tree-cell {
|
||||
border-inline: 1px solid var(--in-content-table-border-color) !important;
|
||||
border-spacing: 0 !important;
|
||||
padding: 4px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
treechildren::-moz-tree-cell-text(hover) {
|
||||
&::-moz-tree-cell-text(hover) {
|
||||
color: var(--in-content-item-hover-text) !important;
|
||||
}
|
||||
treechildren::-moz-tree-cell-text(selected) {
|
||||
&::-moz-tree-cell-text(selected) {
|
||||
font-weight: 600 !important;
|
||||
color: var(--in-content-item-selected-text) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#imagecontainerbox {
|
||||
background-color: var(--in-content-box-background) !important;
|
||||
|
||||
@ -56,40 +56,31 @@
|
||||
/* Use the same margin of other elements for the alignment */
|
||||
margin-inline: 4px !important;
|
||||
min-width: 6.3em !important;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
/* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
|
||||
* the 1px border): */
|
||||
button.medium {
|
||||
padding: 6px 13px !important;
|
||||
min-height: 28px !important;
|
||||
font-size: 0.95em !important;
|
||||
}
|
||||
button.small {
|
||||
&.small {
|
||||
padding: 5px 11px !important;
|
||||
min-height: 24px !important;
|
||||
font-size: 0.9em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove margin added by button.css */
|
||||
xul|button > .button-box > .button-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
xul|menulist:-moz-focusring,
|
||||
xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
|
||||
xul|radio[focused="true"]:-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;
|
||||
}
|
||||
|
||||
xul|button:not([disabled="true"]):hover:active,
|
||||
xul|button[open],
|
||||
xul|button[open]:hover,
|
||||
@ -135,175 +126,118 @@
|
||||
}
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
xul|menulist:-moz-focusring,
|
||||
xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
|
||||
xul|radio[focused="true"]:-moz-focusring {
|
||||
box-shadow: none !important;
|
||||
outline: 2px solid var(--in-content-focus-outline-color) !important;
|
||||
outline-offset: 2px !important;
|
||||
}
|
||||
|
||||
/*- Radio Button -----------------------------------------------------------*/
|
||||
xul|radio {
|
||||
/* margin-inline-start: 0 !important; */
|
||||
appearance: none !important;
|
||||
@include Proton.RadioGlobal;
|
||||
}
|
||||
|
||||
xul|*.radio-check {
|
||||
appearance: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid var(--in-content-box-border-color) !important;
|
||||
border-radius: 100% !important;
|
||||
margin-block: 2px !important; /* extend the vertical clicktarget */
|
||||
margin-inline: 0 6px !important;
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
background-position: center !important;
|
||||
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
|
||||
@include Proton.RadioIcon;
|
||||
}
|
||||
|
||||
xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
|
||||
background-color: var(--in-content-button-background-hover) !important;
|
||||
color: var(--in-content-button-text-color-hover) !important;
|
||||
}
|
||||
|
||||
xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
|
||||
background-color: var(--in-content-button-background-active) !important;
|
||||
}
|
||||
|
||||
xul|*.radio-check[selected] {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
background-color: var(--in-content-primary-button-background) !important;
|
||||
background-image: url("chrome://global/skin/icons/radio.svg") !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
@include Proton.RadioCheckedIcon;
|
||||
}
|
||||
|
||||
xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
|
||||
background-color: var(--in-content-primary-button-background-hover) !important;
|
||||
color: var(--in-content-primary-button-text-color-hover) !important;
|
||||
xul|radio:not([disabled="true"]):hover {
|
||||
> xul|*.radio-check {
|
||||
@include Proton.RadioIconHover;
|
||||
}
|
||||
&:active > xul|*.radio-check {
|
||||
@include Proton.RadioIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
|
||||
background-color: var(--in-content-primary-button-background-active) !important;
|
||||
xul|radio:not([disabled="true"])[selected]:hover {
|
||||
> xul|*.radio-check {
|
||||
@include Proton.RadioCheckedIconHover;
|
||||
}
|
||||
&:active > xul|*.radio-check {
|
||||
@include Proton.RadioCheckedIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
xul|*.radio-label-box {
|
||||
margin-inline: 0 8px !important;
|
||||
padding-inline-start: 0 !important;
|
||||
@include Proton.RadioLabel;
|
||||
}
|
||||
|
||||
/* Disabled checkboxes, radios and labels */
|
||||
xul|checkbox[disabled="true"],
|
||||
xul|radio[disabled="true"],
|
||||
xul|label[disabled="true"] {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
xul|checkbox[disabled="true"],
|
||||
xul|radio[disabled="true"],
|
||||
xul|label[disabled="true"] {
|
||||
opacity: 0.5 !important;
|
||||
@include Proton.DisabledMenuItem;
|
||||
}
|
||||
|
||||
/*- Check Box --------------------------------------------------------------*/
|
||||
/* From checkbox.css */
|
||||
checkbox {
|
||||
appearance: none !important;
|
||||
-moz-box-align: center !important;
|
||||
margin: 4px 2px !important;
|
||||
@include Proton.CheckboxGlobal;
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
@include Proton.CheckboxIcon;
|
||||
}
|
||||
.checkbox-check[checked] {
|
||||
@include Proton.CheckboxCheckedIcon;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover {
|
||||
> .checkbox-check {
|
||||
@include Proton.CheckboxIconHover;
|
||||
}
|
||||
&:active > .checkbox-check {
|
||||
@include Proton.CheckboxIconActive;
|
||||
}
|
||||
|
||||
> .checkbox-check[checked] {
|
||||
@include Proton.CheckboxCheckedIconHover;
|
||||
}
|
||||
&:active > .checkbox-check[checked] {
|
||||
@include Proton.CheckboxCheckedIconActive;
|
||||
}
|
||||
}
|
||||
|
||||
checkbox:-moz-focusring > .checkbox-check {
|
||||
@include Proton.CheckboxFocusRing;
|
||||
}
|
||||
|
||||
@include Contrast {
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check {
|
||||
@include Proton.CheckboxIconHoverContrast;
|
||||
}
|
||||
|
||||
.checkbox-check[checked] {
|
||||
@include Proton.CheckboxCheckedIconContrast;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
|
||||
> .checkbox-check[checked] {
|
||||
@include Proton.CheckboxCheckedIconHoverContrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-icon[src] {
|
||||
margin-inline-end: 2px !important;
|
||||
}
|
||||
.checkbox-label {
|
||||
margin: 1px 0 !important;
|
||||
@include Proton.ChexboxLabel;
|
||||
}
|
||||
|
||||
checkbox[disabled="true"] {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
appearance: none !important;
|
||||
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
|
||||
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
|
||||
border: 1px solid currentColor !important;
|
||||
border-radius: 2px !important;
|
||||
margin-inline-end: 6px !important;
|
||||
}
|
||||
|
||||
.checkbox-check {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 4%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover:active > .checkbox-check {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-active-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 8%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
.checkbox-check[checked] {
|
||||
border-color: var(--checkbox-checked-border-color, transparent) !important;
|
||||
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !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, -moz-accent-color-foreground) !important;
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
|
||||
background-color: var(
|
||||
--checkbox-checked-active-bgcolor,
|
||||
color-mix(in srgb, currentColor 25%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
checkbox:-moz-focusring > .checkbox-check {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
|
||||
@include Contrast {
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check {
|
||||
/* color will set the border-color on the check due to how HCM works for in-content pages. */
|
||||
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
|
||||
}
|
||||
|
||||
.checkbox-check[checked] {
|
||||
color: var(--checkbox-checked-border-color, currentColor) !important;
|
||||
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
}
|
||||
|
||||
checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
|
||||
checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
|
||||
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
}
|
||||
@include Proton.DisabledChexbox;
|
||||
}
|
||||
|
||||
/* From common.css */
|
||||
xul|*.checkbox-check {
|
||||
margin-block: 2px !important;
|
||||
}
|
||||
xul|richlistitem > xul|*.checkbox-check {
|
||||
margin: 3px 6px !important;
|
||||
}
|
||||
@ -318,30 +252,27 @@
|
||||
padding-block: 4px !important;
|
||||
padding-inline: 12px 8px !important;
|
||||
margin: 5px 2px 3px !important;
|
||||
}
|
||||
|
||||
xul|menulist[size="medium"] {
|
||||
&[size="medium"] {
|
||||
padding-block: 6px !important;
|
||||
padding-inline: 16px 10px !important;
|
||||
}
|
||||
|
||||
xul|menulist[size="large"] {
|
||||
&[size="large"] {
|
||||
padding-block: 8px !important;
|
||||
padding-inline: 16px 12px !important;
|
||||
}
|
||||
|
||||
xul|menulist:hover {
|
||||
&:hover {
|
||||
background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
|
||||
}
|
||||
|
||||
xul|menulist:hover:active {
|
||||
&:hover:active {
|
||||
background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
|
||||
}
|
||||
|
||||
xul|menulist:-moz-focusring {
|
||||
&:-moz-focusring {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#label-box {
|
||||
-moz-box-align: center !important;
|
||||
@ -354,16 +285,16 @@
|
||||
appearance: none !important;
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
|
||||
&[exportparts="icon: dropmarker-icon"] {
|
||||
/* dropmarker::part(icon)
|
||||
* ::part is not apply chrome
|
||||
*/
|
||||
dropmarker[exportparts="icon: dropmarker-icon"] {
|
||||
list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
#highlightable-label:not([highlightable="true"]),
|
||||
#label[highlightable="true"] {
|
||||
@ -397,25 +328,23 @@
|
||||
padding-inline: 10px 30px !important;
|
||||
}
|
||||
|
||||
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
|
||||
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
|
||||
xul|menulist > xul|menupopup > xul|menu,
|
||||
xul|menulist > xul|menupopup > xul|menuitem {
|
||||
&:not([disabled="true"])[_moz-menuactive="true"] {
|
||||
color: var(--in-content-item-hover-text) !important;
|
||||
background-color: var(--in-content-item-hover) !important;
|
||||
}
|
||||
|
||||
xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
|
||||
xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
|
||||
&:not([disabled="true"])[selected="true"] {
|
||||
color: var(--in-content-item-selected-text) !important;
|
||||
background-color: var(--in-content-item-selected) !important;
|
||||
}
|
||||
|
||||
xul|menulist > xul|menupopup > xul|menu[disabled="true"],
|
||||
xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
|
||||
&[disabled="true"] {
|
||||
color: #999 !important;
|
||||
/* override the [_moz-menuactive="true"] background color from
|
||||
global/menu.css */
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
xul|menulist > xul|menupopup xul|menuseparator {
|
||||
appearance: none !important;
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
/*= Common - URL Bar focus color =============================================*/
|
||||
// TODO: `OS` Not covered case
|
||||
$_urlBarFocusSelector: ":root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme)";
|
||||
$_urlBarFocusDarkSelector: ":root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive)";
|
||||
|
||||
@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) {
|
||||
#{$_urlBarFocusSelector},
|
||||
#{$_urlBarFocusDarkSelector} {
|
||||
--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 {
|
||||
#{$_urlBarFocusSelector} #urlbar[open] > #urlbar-background,
|
||||
#{$_urlBarFocusDarkSelector} #urlbar[open] > #urlbar-background {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color 50%,
|
||||
|
||||
@ -309,16 +309,17 @@
|
||||
/*= Windows10 - Titlebar accent color ========================================*/
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
/* Tab Bar */
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
|
||||
.titlebar-color {
|
||||
color: -moz-accent-color-foreground;
|
||||
background-color: -moz-accent-color;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
|
||||
.toolbar-items {
|
||||
--toolbarbutton-icon-fill: currentColor;
|
||||
--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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
@use "option" as *;
|
||||
|
||||
@mixin NativeMenu() {
|
||||
@include Option("widget.macos.native-context-menus", "widget.gtk.native-context-menus") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,157 @@
|
||||
//== Radio Button ==============================================================
|
||||
@mixin RadioGlobal {
|
||||
/* margin-inline-start: 0 !important; */
|
||||
appearance: none !important;
|
||||
}
|
||||
|
||||
@mixin RadioIcon {
|
||||
appearance: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
|
||||
border: 1px solid var(--in-content-box-border-color) !important;
|
||||
border-radius: 100% !important;
|
||||
|
||||
padding: 0 !important;
|
||||
margin-inline: 0 6px !important;
|
||||
margin-block: 2px !important; /* extend the vertical clicktarget */
|
||||
|
||||
background-color: var(--in-content-button-background) !important;
|
||||
background-position: center !important;
|
||||
|
||||
flex-shrink: 0 !important; /* avoid shrinking inside flex container */
|
||||
}
|
||||
|
||||
@mixin RadioCheckedIcon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
color: var(--in-content-primary-button-text-color) !important;
|
||||
|
||||
background-color: var(--in-content-primary-button-background) !important;
|
||||
background-image: url("chrome://global/skin/icons/radio.svg") !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
@mixin RadioIconHover {
|
||||
background-color: var(--in-content-button-background-hover) !important;
|
||||
color: var(--in-content-button-text-color-hover) !important;
|
||||
}
|
||||
|
||||
@mixin RadioIconActive {
|
||||
background-color: var(--in-content-button-background-active) !important;
|
||||
}
|
||||
|
||||
@mixin RadioCheckedIconHover {
|
||||
background-color: var(--in-content-primary-button-background-hover) !important;
|
||||
color: var(--in-content-primary-button-text-color-hover) !important;
|
||||
}
|
||||
|
||||
@mixin RadioCheckedIconActive {
|
||||
background-color: var(--in-content-primary-button-background-active) !important;
|
||||
}
|
||||
|
||||
@mixin RadioLabel {
|
||||
margin-inline: 0 8px !important;
|
||||
padding-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
@mixin DisabledMenuItem {
|
||||
color: inherit !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
//== Check Box =================================================================
|
||||
@mixin CheckboxGlobal($content: false) {
|
||||
appearance: none !important;
|
||||
-moz-box-align: center !important;
|
||||
margin: if($content, 0px, 4px) 2px !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxIcon {
|
||||
appearance: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
|
||||
border: 1px solid currentColor !important;
|
||||
border-radius: 2px !important;
|
||||
|
||||
color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
|
||||
background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
|
||||
|
||||
margin-inline-end: 6px !important; /* or 2px */
|
||||
margin-block: 2px !important; /* From common.css */
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIcon {
|
||||
-moz-context-properties: fill !important;
|
||||
fill: currentColor !important;
|
||||
color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
border-color: var(--checkbox-checked-border-color, transparent) !important;
|
||||
|
||||
background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
|
||||
background-image: url("chrome://global/skin/icons/check.svg") !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
/* Style the button also when printing with "Print Backgrounds" unchecked */
|
||||
color-adjust: exact !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxIconHover {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-hover-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 4%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxIconActive {
|
||||
background-color: var(
|
||||
--checkbox-unchecked-active-bgcolor,
|
||||
color-mix(in srgb, -moz-accent-color 8%, Field)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconHover {
|
||||
background-color: var(
|
||||
--checkbox-checked-hover-bgcolor,
|
||||
color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconActive {
|
||||
background-color: var(
|
||||
--checkbox-checked-active-bgcolor,
|
||||
color-mix(in srgb, currentColor 25%, -moz-accent-color)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxIconHoverContrast {
|
||||
/* color will set the border-color on the check due to how HCM works for in-content pages. */
|
||||
color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconContrast {
|
||||
color: var(--checkbox-checked-border-color, currentColor) !important;
|
||||
fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxCheckedIconHoverContrast {
|
||||
color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
|
||||
}
|
||||
|
||||
@mixin CheckboxFocusRing {
|
||||
outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
|
||||
outline-offset: var(--focus-outline-offset, 2px) !important;
|
||||
}
|
||||
|
||||
@mixin ChexboxLabel {
|
||||
margin: 1px 0 !important;
|
||||
}
|
||||
|
||||
@mixin DisabledChexbox {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
@ -2257,9 +2257,9 @@ minimatch@^3.0.4:
|
||||
brace-expansion "^1.1.7"
|
||||
|
||||
minimist@^1.2.5:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
|
||||
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
|
||||
integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
|
||||
|
||||
ms@2.1.2:
|
||||
version "2.1.2"
|
||||
|
||||
@ -61,6 +61,7 @@ user_pref("userChrome.rounding.square_tab", true);
|
||||
// user_pref("userChrome.compatibility.dynamic_separator", true); // Need dynamic_seperator
|
||||
|
||||
// user_pref("userChrome.compatiblity.os.linux_non_native_titlebar_button", true);
|
||||
// user_pref("userChrome.compatibility.os.windows_maximized, true");
|
||||
|
||||
// == Theme Custom Settings ====================================================
|
||||
// -- User Chrome --------------------------------------------------------------
|
||||
@ -108,6 +109,7 @@ user_pref("userChrome.rounding.square_tab", true);
|
||||
|
||||
// user_pref("userChrome.icon.account_image_to_right", true);
|
||||
// user_pref("userChrome.icon.account_label_to_right", true);
|
||||
// user_pref("userChrome.icon.menu.full", true);
|
||||
|
||||
// -- User Content -------------------------------------------------------------
|
||||
// user_pref("userContent.player.ui.twoline", true);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user