diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 741b72bf..5e0f1a97 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6034,8 +6034,9 @@ menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, @@ -6059,6 +6060,7 @@ list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; } } + /* Padding */ :root { --context-menu-background-padding-default: 5px; @@ -6077,8 +6079,9 @@ menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, @@ -6134,8 +6137,9 @@ menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, @@ -6165,8 +6169,9 @@ menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), menupopup:is(#menu_FilePopup, #menu_EditPopup, #menu_viewPopup, #goPopup, #historyMenuPopup, #bookmarksMenuPopup, #menu_ToolsPopup, #menu_HelpPopup) menu:not(.menu-iconic, .in-menulist, [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]), menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem, .openintabs-menuitem, @@ -6805,6 +6810,64 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } } + /*= 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"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + .downloadShowMenuItem { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("../icons/link-square.svg"); + } + #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem, + #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"); + } + /*= placeContext =============================================================*/ #placesContext_open { --menuitem-image: url("../icons/link-square.svg"); @@ -6821,6 +6884,10 @@ --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"); } @@ -6866,10 +6933,12 @@ --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } + #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("chrome://global/skin/icons/folder.svg"); } @supports -moz-bool-pref("userChrome.icon.library") { + #placesContext_showInFolder, #placesContext_new\:folder { --menuitem-image: url("../icons/folder.svg"); } @@ -6966,62 +7035,6 @@ --menuitem-image: url("../icons/eye-tracking-off.svg"); } - /*= 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"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - .downloadShowMenuItem { - --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"); - } - /*= SyncedTabsSidebarContext =================================================*/ #syncedTabsOpenSelected { --menuitem-image: url("../icons/link-square.svg"); diff --git a/css/leptonContent.css b/css/leptonContent.css index 95327424..b346bde5 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -7,13 +7,16 @@ --controlBar-height: 40px; /* Original: 40px, Replace to this value */ } - #controlsContainer .touch { --button-size: 48px !important; /* Original: 40px */ --controlBar-height: 52px; /* Original: 52px */ } + #controlsContainer .controlBar { + height: var(--controlBar-height) !important; + /* Original: 40px */ + } .videocontrols[inDOMFullscreen] #controlsContainer { --button-size: 64px !important; @@ -25,19 +28,12 @@ --controlBar-height: 64px; /* Original: 40px */ } - .videocontrols[inDOMFullscreen] #controlsContainer .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 { padding-bottom: 8px !important; } @@ -56,12 +52,6 @@ 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, 0.85)); - } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { audio { --box-shadow1: rgba(249, 249, 250, 0.12); @@ -69,6 +59,11 @@ --box-shadow3: rgba(82, 82, 94, 0.04); } } + + video { + --duration-color: #eee; + --media-background: linear-gradient(transparent, rgba(26, 26, 26, 0.85)); + } @media (prefers-contrast) { video { --duration-color: #929292; @@ -77,10 +72,10 @@ /* Like Original */ } } + #controlsContainer .controlBar { background: var(--media-background) !important; } - #controlsContainer .duration { color: var(--duration-color) !important; /* Original: #929292 */ @@ -161,7 +156,6 @@ padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */ } - #controlsContainer .scrubberStack { /* Vertical */ order: var(--scrubberStack-order); @@ -172,7 +166,6 @@ width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); margin-inline: var(--scrubberStack-margin-inline) !important; } - #controlsContainer .positionDurationBox { flex-grow: var(--positionDurationBox-flex-grow); margin-left: var(--positionDurationBox-margin-left); @@ -192,7 +185,6 @@ #controlsContainer .fullscreenButton { background-image: url("../icons/enter-fullscreen.svg") !important; } - #controlsContainer .fullscreenButton[fullscreened] { background-image: url("../icons/exit-fullscreen.svg") !important; } @@ -209,11 +201,9 @@ cursor: pointer; opacity: 0.65 !important; } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay { opacity: 0.85 !important; } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { opacity: 1 !important; fill: #48a0f7 !important; @@ -228,13 +218,11 @@ transition: transform 350ms ease; opacity: 1 !important; } - #controlsContainer .controlBar[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 { display: unset !important; @@ -289,7 +277,6 @@ .top-site-outer .tile { overflow: hidden; } - .top-site-outer .tile .icon-wrapper { width: 100% !important; /* Original: 48px */ @@ -311,7 +298,6 @@ button.close-button { transition: background 1.5s var(--animation-easing-function); } - .top-site-outer:hover, #searchSubmit:hover, button.icon:hover, @@ -344,7 +330,6 @@ display: flex; flex-wrap: wrap; } - .body-wrapper.on > .discovery-stream.ds-layout { flex-basis: 100%; } @@ -367,7 +352,6 @@ --newtab-search-dropdown-color: var(--newtab-search-background-color) !important; --newtab-element-hover-color: color-mix(in srgb, currentColor 9%, transparent) !important; } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { #root { /* Default Dark Mode */ @@ -375,6 +359,7 @@ /* 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); @@ -431,18 +416,15 @@ .contentSearchSuggestionTable .contentSearchSettingsButton:hover { color: var(--newtab-text-primary-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, .contentSearchSuggestionTable .contentSearchSettingsButton:hover, .contentSearchSuggestionTable .contentSearchOneOffItem.selected { background: var(--newtab-element-hover-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, .contentSearchSuggestionTable .contentSearchOneOffItem:active { background: var(--newtab-element-active-color) !important; } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { fill: var(--newtab-icon-secondary-color) !important; } @@ -558,6 +540,7 @@ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { @-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"), @@ -1993,17 +1976,13 @@ @supports -moz-bool-pref("userContent.page.field_border") { @media (prefers-reduced-motion: no-preference) { @-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); - } - } } } /*= View Source ==============================================================*/ @@ -2333,314 +2312,6 @@ transform: scaleX(-1) !important; } } - /*= Context Menu ===========================================================*/ - @supports -moz-bool-pref("userChrome.icon.context_menu") { - menupopup menuitem:not([type="checkbox"], [type="radio"]), - menupopup menu:not([type="checkbox"], [type="radio"]), - #main-menubar > menu { - -moz-appearance: none !important; - /* Linux: menulist */ - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - /* 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); - } - - /* For native context menus */ - @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { - :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"]) { - list-style-image: var(--menuitem-image) !important; - } - } - /* Padding */ - :root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; - } - - /* Padding - Windows */ - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - /* Checkbox */ - :root { - --context-menu-text-padding: calc( - var(--menu-padding) + var(--context-menu-background-padding-default) + 16px - ); - } - - :not(menu, #ContentSelectDropdown, #context-navigation) - > menupopup - > menuitem[type="checkbox"][checked="false"] - > .menu-iconic-left { - padding-inline-start: var(--context-menu-text-padding); - } - } - @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - :root { - --context-menu-background-padding-default: 2px; - } - } - @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - :root { - --context-menu-background-padding-default: 3px; - } - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8) { - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; - } - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-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) - ); - } - - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; - } - } - /* Padding - Linux */ - @media (-moz-gtk-csd-available) { - :root { - --context-menu-background-padding-default: 6px; - } - } - /* Padding - Mac */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } - - /* context menu width */ - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { - padding-inline-end: var(--context-menu-background-padding) !important; - } - #placesContext menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text, - #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) > .menu-text { - /* text position */ - padding-inline-start: var(--context-menu-mac-padding) !important; - } - - /* Checkbox menuitem, None iconic menu */ - #placesContext menuitem[type="checkbox"], - #placesContext menu:not(.menu-iconic) { - padding-inline-start: calc( - var(--context-menu-background-padding) + var(--context-menu-mac-padding) - ) !important; - } - } - /* Icon lists */ - /*= placeContext =============================================================*/ - #placesContext_open { - --menuitem-image: url("../icons/link-square.svg"); - } - - #placesContext_openBookmarkContainer\:tabs, - #placesContext_openBookmarkLinks\:tabs { - --menuitem-image: url("../icons/movetowindow-16.svg"); - } - - #placesContext_open\:newtab, - #placesContext_openContainer\:tabs, - #placesContext_openLinks\:tabs { - --menuitem-image: url("chrome://browser/skin/new-tab.svg"); - } - - #placesContext_open\:newwindow { - --menuitem-image: url("chrome://browser/skin/window.svg"); - } - - #placesContext_open\:newprivatewindow { - --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); - } - - #placesContext_show_bookmark\:info, - #placesContext_show\:info, - #placesContext_show_folder\:info { - --menuitem-image: url("chrome://global/skin/icons/edit.svg"); - } - - #placesContext_deleteBookmark, - #placesContext_deleteFolder, - #placesContext_delete, - #placesContext_delete_history { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #placesContext_deleteHost { - --menuitem-image: url("../icons/eye-hide.svg"); - } - - #placesContext_sortBy\:name { - --menuitem-image: url("../icons/text-sort-ascending.svg"); - } - - #placesContext_cut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #placesContext_copy { - --menuitem-image: url("../icons/edit-copy.svg"); - } - - #placesContext_paste_group { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #placesContext_new\:bookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #placesContext_new\:folder { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #placesContext_new\:folder { - --menuitem-image: url("../icons/folder.svg"); - } - } - - #placesContext_new\:separator { - --menuitem-image: url("../icons/vertical-line.svg"); - } - - #placesContext_paste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #placesContext_createBookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #show-other-bookmarks_PersonalToolbar { - /* checkbox */ - --menuitem-image: url("../icons/star-line-horizontal.svg"); - } - - #placesContext_showAllBookmarks { - --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); - } - - .openintabs-menuitem { - --menuitem-image: url("../icons/movetowindow-16.svg"); - } - - /*= organizeButtonPopup ======================================================*/ - #newbookmark { - --menuitem-image: url("chrome://browser/skin/bookmark.svg"); - } - - #newfolder { - --menuitem-image: url("chrome://global/skin/icons/folder.svg"); - } - @supports -moz-bool-pref("userChrome.icon.library") { - #newfolder { - --menuitem-image: url("../icons/folder.svg"); - } - } - - #newseparator { - --menuitem-image: url("../icons/vertical-line.svg"); - } - - #orgUndo { - --menuitem-image: url("../icons/undo.svg"); - } - - #orgCut { - --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); - } - - #orgCopy { - --menuitem-image: url("../icons/edit-copy.svg"); - } - - #orgPaste { - --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); - } - - #orgDelete { - --menuitem-image: url("chrome://global/skin/icons/delete.svg"); - } - - #orgSelectAll { - --menuitem-image: url("../icons/select-all-on.svg"); - } - - #orgClose { - --menuitem-image: url("chrome://global/skin/icons/close.svg"); - } - - /*= viewMenuPopup ============================================================*/ - #viewColumns { - --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); - } - - #viewSort { - --menuitem-image: url("../icons/text-sort-ascending.svg"); - } - - /*= maintenanceButtonPopup ===================================================*/ - #backupBookmarks { - --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); - } - - #fileImport { - --menuitem-image: url("chrome://browser/skin/save.svg"); - } - - #fileExport { - --menuitem-image: url("chrome://browser/skin/open.svg"); - } - - #browserImport { - --menuitem-image: url("chrome://browser/skin/import.svg"); - } - } @media (-moz-gtk-csd-available) { /*= Layout Fixes =========================================================*/ menupopup menu { @@ -3171,6 +2842,397 @@ } } } +/** Menu - Icons Layout *******************************************************/ +@supports -moz-bool-pref("userChrome.icon.menu") { + @-moz-document url("chrome://browser/content/places/places.xhtml"), + url("about:downloads") { + menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), + menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) { + -moz-appearance: none !important; + /* Linux: menulist */ + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + /* 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); + } + + /* For native context menus */ + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { + :not(menu, #ContentSelectDropdown) + > menupopup + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + :not(menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; + } + } + + /* Padding */ + :root { + --context-menu-background-padding-default: 5px; + --context-menu-background-padding: var(--context-menu-background-padding-default); + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: var(--context-menu-background-padding) !important; + } + + /* Padding - Windows */ + @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { + :root { + --context-menu-background-padding-default: 2px; + } + } + @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { + :root { + --context-menu-background-padding-default: 3px; + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + background-position: left var(--context-menu-background-padding) center !important; + padding-inline-start: 0 !important; + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-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) + ); + } + + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]), + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + padding-inline-start: var(--menu-background-padding-default) !important; + margin-left: 0 !important; + } + } + /* Padding - Linux */ + @media (-moz-gtk-csd-available) { + :root { + --context-menu-background-padding-default: 6px; + } + + /* Contextmenu Checkbox Unset */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[type="checkbox"] { + margin-inline: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"] + > .menu-iconic-left + > .menu-iconic-icon { + margin-inline-end: 0 !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem[type="checkbox"]:not([checked="true"]) + > .menu-iconic-left + > .menu-iconic-icon { + border: none !important; + background-color: unset !important; + } + } + /* Padding - Mac */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --context-menu-background-padding-default: 10px; + --context-menu-mac-padding: 21px; + } + + /* context menu width */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]), + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) { + padding-inline-end: var(--context-menu-background-padding) !important; + } + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-text, + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-text { + /* text position */ + padding-inline-start: var(--context-menu-mac-padding) !important; + } + + /* Checkbox menuitem, None iconic menu */ + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menuitem[checked="true"], + menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu) menu:not(.menu-iconic) { + padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + } + } + /*= Context Menu ===========================================================*/ + @supports -moz-bool-pref("userChrome.icon.context_menu") { + /* Icon lists */ + /*= 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"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + .downloadShowMenuItem { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #downloadsContextMenu > menuitem.downloadOpenReferrerMenuItem, + #downloadsContextMenu > menuitem[command="downloadsCmd_openReferrer"] { + --menuitem-image: url("../icons/link-square.svg"); + } + #downloadsContextMenu > menuitem.downloadCopyLocationMenuItem, + #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"); + } + + /*= placeContext =============================================================*/ + #placesContext_open { + --menuitem-image: url("../icons/link-square.svg"); + } + + #placesContext_openBookmarkContainer\:tabs, + #placesContext_openBookmarkLinks\:tabs { + --menuitem-image: url("../icons/movetowindow-16.svg"); + } + + #placesContext_open\:newtab, + #placesContext_openContainer\:tabs, + #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"); + } + + #placesContext_open\:newprivatewindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + + #placesContext_show_bookmark\:info, + #placesContext_show\:info, + #placesContext_show_folder\:info { + --menuitem-image: url("chrome://global/skin/icons/edit.svg"); + } + + #placesContext_deleteBookmark, + #placesContext_deleteFolder, + #placesContext_delete, + #placesContext_delete_history { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #placesContext_deleteHost { + --menuitem-image: url("../icons/eye-hide.svg"); + } + + #placesContext_sortBy\:name { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + #placesContext_cut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #placesContext_copy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #placesContext_paste_group { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #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"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #placesContext_showInFolder, + #placesContext_new\:folder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #placesContext_new\:separator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #placesContext_paste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #placesContext_createBookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #show-other-bookmarks_PersonalToolbar { + /* checkbox */ + --menuitem-image: url("../icons/star-line-horizontal.svg"); + } + + #placesContext_showAllBookmarks { + --menuitem-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); + } + + .openintabs-menuitem { + --menuitem-image: url("../icons/movetowindow-16.svg"); + } + } + @supports -moz-bool-pref("userChrome.icon.global_menu") { + /*= organizeButtonPopup ======================================================*/ + #newbookmark { + --menuitem-image: url("chrome://browser/skin/bookmark.svg"); + } + + #newfolder { + --menuitem-image: url("chrome://global/skin/icons/folder.svg"); + } + @supports -moz-bool-pref("userChrome.icon.library") { + #newfolder { + --menuitem-image: url("../icons/folder.svg"); + } + } + + #newseparator { + --menuitem-image: url("../icons/vertical-line.svg"); + } + + #orgUndo { + --menuitem-image: url("../icons/undo.svg"); + } + + #orgCut { + --menuitem-image: url("chrome://browser/skin/edit-cut.svg"); + } + + #orgCopy { + --menuitem-image: url("../icons/edit-copy.svg"); + } + + #orgPaste { + --menuitem-image: url("chrome://browser/skin/edit-paste.svg"); + } + + #orgDelete { + --menuitem-image: url("chrome://global/skin/icons/delete.svg"); + } + + #orgSelectAll { + --menuitem-image: url("../icons/select-all-on.svg"); + } + + #orgClose { + --menuitem-image: url("chrome://global/skin/icons/close.svg"); + } + + /*= viewMenuPopup ============================================================*/ + #viewColumns { + --menuitem-image: url("chrome://global/skin/icons/columnpicker.svg"); + } + + #viewSort { + --menuitem-image: url("../icons/text-sort-ascending.svg"); + } + + /*= maintenanceButtonPopup ===================================================*/ + #backupBookmarks { + --menuitem-image: url("chrome://devtools/skin/images/datastore.svg"); + } + + #fileImport { + --menuitem-image: url("chrome://browser/skin/save.svg"); + } + + #fileExport { + --menuitem-image: url("chrome://browser/skin/open.svg"); + } + + #browserImport { + --menuitem-image: url("chrome://browser/skin/import.svg"); + } + } + } +} /** Download Panel ************************************************************/ @-moz-document url-prefix("about:downloads") { @media (prefers-reduced-motion: no-preference) { @@ -3193,6 +3255,4 @@ } } } - @supports -moz-bool-pref("userChrome.icon.context_menu") { - } } diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 6593ce1d..3a0acf32 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -31,11 +31,11 @@ @include Option("userContent.newTab.full_icon") { .top-site-outer .tile { overflow: hidden; - } - .top-site-outer .tile .icon-wrapper { - width: 100% !important; /* Original: 48px */ - height: 100% !important; /* Original: 48px */ + .icon-wrapper { + width: 100% !important; /* Original: 48px */ + height: 100% !important; /* Original: 48px */ + } } } @@ -52,12 +52,9 @@ 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 { - transition: background 0.5s var(--animation-easing-function); + &:hover { + transition: background 0.5s var(--animation-easing-function); + } } /* Search Bar */ @@ -83,10 +80,10 @@ .body-wrapper.on { display: flex; flex-wrap: wrap; - } - .body-wrapper.on > .discovery-stream.ds-layout { - flex-basis: 100%; + > .discovery-stream.ds-layout { + flex-basis: 100%; + } } .body-wrapper.on > .collapsible-section[data-section-id="topstories"], @@ -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 { + @include Dark { /* 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 { - color: var(--newtab-text-primary-color) !important; - } + .contentSearchSuggestionTable { + .contentSearchSuggestionRow.selected, + .contentSearchSettingsButton:hover { + color: var(--newtab-text-primary-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected, - .contentSearchSuggestionTable .contentSearchSettingsButton:hover, - .contentSearchSuggestionTable .contentSearchOneOffItem.selected { - background: var(--newtab-element-hover-color) !important; - } + .contentSearchSuggestionRow.selected, + .contentSearchSettingsButton:hover, + .contentSearchOneOffItem.selected { + background: var(--newtab-element-hover-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active, - .contentSearchSuggestionTable .contentSearchOneOffItem:active { - background: var(--newtab-element-active-color) !important; - } + .contentSearchSuggestionRow.selected:active, + .contentSearchOneOffItem:active { + background: var(--newtab-element-active-color) !important; + } - .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon { - fill: var(--newtab-icon-secondary-color) !important; + .contentSearchSuggestionRow.selected .historyIcon { + fill: var(--newtab-icon-secondary-color) !important; + } } } } diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss new file mode 100644 index 00000000..63b5e164 --- /dev/null +++ b/src/contents/_context_menu.scss @@ -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"; + } +} diff --git a/src/contents/_downloads.scss b/src/contents/_downloads.scss index 4c25254e..8f12cce4 100644 --- a/src/contents/_downloads.scss +++ b/src/contents/_downloads.scss @@ -4,8 +4,4 @@ @import "../decoration/download_panel"; } } - - @include Option("userChrome.icon.context_menu") { - // TODO - } } diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss index b17bc957..aac860c4 100644 --- a/src/contents/_error_page.scss +++ b/src/contents/_error_page.scss @@ -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"); } diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss index c7dfaa89..8db37ae3 100644 --- a/src/contents/_proton_color.scss +++ b/src/contents/_proton_color.scss @@ -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"), diff --git a/src/contents/_video_player.scss b/src/contents/_video_player.scss index 8e41ac59..01cbd68d 100644 --- a/src/contents/_video_player.scss +++ b/src/contents/_video_player.scss @@ -3,26 +3,28 @@ #controlsContainer { // --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404 --controlBar-height: 40px; /* Original: 40px, Replace to this value */ + .touch { + --button-size: 48px !important; /* Original: 40px */ + --controlBar-height: 52px; /* Original: 52px */ + } + .controlBar { + height: var(--controlBar-height) !important; /* Original: 40px */ + } } - #controlsContainer .touch { - --button-size: 48px !important; /* Original: 40px */ - --controlBar-height: 52px; /* Original: 52px */ - } - .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 { - --button-size: 72px !important; /* Original: 40px */ - --controlBar-height: 64px; /* Original: 52px */ - } - #controlsContainer .controlBar { - height: var(--controlBar-height) !important; /* Original: 40px */ - } - .videocontrols[inDOMFullscreen] #controlsContainer .controlBar { - padding-bottom: 8px !important; + .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 */ + .touch { + --button-size: 72px !important; /* Original: 40px */ + --controlBar-height: 64px; /* Original: 52px */ + } + .controlBar { + padding-bottom: 8px !important; + } + } } } @@ -39,30 +41,30 @@ 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 { + @include Dark { --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 { + 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 { - background: var(--media-background) !important; - } - #controlsContainer .duration { - color: var(--duration-color) !important; /* Original: #929292 */ + + #controlsContainer { + .controlBar { + background: var(--media-background) !important; + } + .duration { + color: var(--duration-color) !important; /* Original: #929292 */ + } } @include Option("userContent.player.ui.twoline") { @@ -138,28 +140,30 @@ transform:scale(1); } - #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 { - /* Vertical */ - order: var(--scrubberStack-order); - height: var(--scrubberStack-height, var(--thumb-size)) !important; - transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); - - /* Horizontal */ - flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; - width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); - margin-inline: var(--scrubberStack-margin-inline) !important; - } - #controlsContainer .positionDurationBox { - flex-grow: var(--positionDurationBox-flex-grow); - margin-left: var(--positionDurationBox-margin-left); - text-align: var(--positionDurationBox-text-align) !important; + #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 */ + } + .scrubberStack { + /* Vertical */ + order: var(--scrubberStack-order); + height: var(--scrubberStack-height, var(--thumb-size)) !important; + transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2))); + + /* Horizontal */ + flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important; + width: var(--scrubberStack-twoline-width, var(--scrubberStack-width)); + margin-inline: var(--scrubberStack-margin-inline) !important; + } + .positionDurationBox { + flex-grow: var(--positionDurationBox-flex-grow); + margin-left: var(--positionDurationBox-margin-left); + text-align: var(--positionDurationBox-text-align) !important; + } } #playButton { @@ -174,9 +178,9 @@ @include Option("userContent.player.icon") { #controlsContainer .fullscreenButton { background-image: url("../icons/enter-fullscreen.svg") !important; - } - #controlsContainer .fullscreenButton[fullscreened] { - background-image: url("../icons/exit-fullscreen.svg") !important; + &[fullscreened] { + background-image: url("../icons/exit-fullscreen.svg") !important; + } } } @@ -189,16 +193,18 @@ /* Click to play UI */ @include Option("userContent.player.click_to_play") { - #controlsContainer .clickToPlay { - cursor: pointer; - opacity: 0.65 !important; - } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay { - opacity: 0.85 !important; - } - #controlsContainer .controlsSpacerStack:hover > .clickToPlay:hover { - opacity: 1 !important; - fill: #48a0f7 !important; /* color as .scrubber */ + #controlsContainer { + .clickToPlay { + cursor: pointer; + opacity: 0.65 !important; + } + .controlsSpacerStack:hover > .clickToPlay { + opacity: 0.85 !important; + &:hover { + opacity: 1 !important; + fill: #48a0f7 !important; /* color as .scrubber */ + } + } } } @@ -209,17 +215,18 @@ #controlsContainer .controlBar { transition: transform 350ms ease; opacity: 1 !important; - } - #controlsContainer .controlBar[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 { - display: unset !important; - opacity: 0.55; - transition: opacity 150ms ease 50ms; + &[hidden] { + transform: translateY(100%); + transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important; + opacity: 0 !important; + + .progressBar, + .bufferBar { + display: unset !important; + opacity: 0.55; + transition: opacity 150ms ease 50ms; + } + } } /* Two line Control Bar */ diff --git a/src/contents/proton_contents/_field_border.scss b/src/contents/proton_contents/_field_border.scss index 65877e0b..3b60cc42 100644 --- a/src/contents/proton_contents/_field_border.scss +++ b/src/contents/proton_contents/_field_border.scss @@ -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); - } -} diff --git a/src/icons/_context_menu.scss b/src/icons/_context_menu.scss index 4fb60ca2..df54e0ff 100644 --- a/src/icons/_context_menu.scss +++ b/src/icons/_context_menu.scss @@ -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"; diff --git a/src/icons/_layout_menu.scss b/src/icons/_layout_menu.scss index d5efe3ac..fb0be852 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/_layout_menu.scss @@ -1,33 +1,7 @@ -//-- Mixin --------------------------------------------------------------------- -// Items -$_iconNoneCommon: ".in-menulist, [checked=\"true\"]"; -$_iconMenuitem: "menuitem:not(.menuitem-iconic, .bookmark-item, #{$_iconNoneCommon})"; -$_iconMenu: "menu:not(.menu-iconic, #{$_iconNoneCommon})"; +@import "./layout_menu_common"; +//-- Mixin --------------------------------------------------------------------- // 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) > menuitem"; -$_libraryMenu: "menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu"; -$_sendTabMenuitem: "menupopup:is(#context_sendTabToDevicePopupMenu, #context-sendpagetodevice-popup, #context-sendlinktodevice-popup) > menuitem"; -$_otherIconMenu: ".openintabs-menuitem, #blockedPopupDontShowMessage, #BMB_viewBookmarksToolbar"; - $_layoutCommonMenus: ( $_iconMenuPopupMenus, $_libraryMenuitem, @@ -57,41 +31,26 @@ $_layoutCommonMenus: ( } //------------------------------------------------------------------------------ -#{selector.append( - "menupopup menuitem, menupopup menu", - ":not([type=\"checkbox\"][checked=\"true\"], [type=\"radio\"])" -)}, + +#{$_initialMenus}, #{$_globalMenus} { - -moz-appearance: none !important; /* Linux: menulist */ + @include _initial_menus; } /* Icon */ @include _layoutInitIconMenus { - /* 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 _layout_icon_menus; } /* For native context menus */ -@include NativeMenu { - #{$_nestedPopupIconMenus} { - list-style-image: var(--menuitem-image, url("../icons/blank.svg")) !important; - } +#{$_nestedPopupIconMenus} { + @include _layout_icon_native_menus; } /* Padding */ -:root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); -} +@include _layout_root_padding; @include _layoutInitPaddingMenus { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !important; + @include _layout_init_padding; } /* Menubar */ @@ -115,80 +74,47 @@ $_layoutCommonMenus: ( } /* 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) { @include _layoutIconMenus { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; + @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; @include _layoutIconMenus { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; + @include _layout_init_win10; } } /* Padding - Linux */ @include OS($linux) { - :root { - --context-menu-background-padding-default: 6px; - } + @include _layout_root_linux; #{$_globalMenus} > .menubar-text { - padding-inline-start: 3px; + @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 */ #{$_nestedPopupPaddingMenus}, #blockedPopupDontShowMessage { - padding-inline-end: var(--context-menu-background-padding) !important; + @include _layout_init_mac_width; } /* text position */ #{selector.nest($_nestedPopupPadding, "menuitem > .menu-text, menu > .menu-text")} { - padding-inline-start: var(--context-menu-mac-padding) !important; + @include _layout_init_mac_text; } /* Checkbox menuitem, None iconic menu */ #{selector.nest($_nestedPopupPadding, "menuitem[checked=\"true\"], menu:not(.menu-iconic)")} { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; + @include _layout_init_mac_others; } /* Global Menu */ diff --git a/src/icons/_layout_menu_common.scss b/src/icons/_layout_menu_common.scss new file mode 100644 index 00000000..3d3a92c5 --- /dev/null +++ b/src/icons/_layout_menu_common.scss @@ -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); +// } +// } diff --git a/src/icons/_layout_menu_contents.scss b/src/icons/_layout_menu_contents.scss new file mode 100644 index 00000000..4c383a07 --- /dev/null +++ b/src/icons/_layout_menu_contents.scss @@ -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; + } +} diff --git a/src/icons/context_menu/_downloads.scss b/src/icons/context_menu/_downloads.scss new file mode 100644 index 00000000..957853db --- /dev/null +++ b/src/icons/context_menu/_downloads.scss @@ -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"); + } +} diff --git a/src/icons/context_menu/_others.scss b/src/icons/context_menu/_others.scss index 262b58dc..2f55da56 100644 --- a/src/icons/context_menu/_others.scss +++ b/src/icons/context_menu/_others.scss @@ -62,56 +62,6 @@ --menuitem-image: url("../icons/eye-tracking-off.svg"); } -/*= 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 { - &[command="downloadsCmd_openReferrer"] { - --menuitem-image: url("../icons/link-square.svg"); - } - &[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"); - } -} - /*= SyncedTabsSidebarContext =================================================*/ #syncedTabsOpenSelected { --menuitem-image: url("../icons/link-square.svg"); diff --git a/src/icons/context_menu/_place.scss b/src/icons/context_menu/_place.scss index cef867ec..b6e6d56f 100644 --- a/src/icons/context_menu/_place.scss +++ b/src/icons/context_menu/_place.scss @@ -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") { diff --git a/src/leptonContent.scss b/src/leptonContent.scss index b9496841..cc96c6da 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -3,6 +3,7 @@ @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"); @@ -32,5 +33,10 @@ @import "contents/proton_contents"; } +/** Menu - Icons Layout *******************************************************/ +@include Option("userChrome.icon.menu") { + @import "contents/context_menu"; +} + /** Download Panel ************************************************************/ @import "contents/downloads"; diff --git a/src/library/_contents.scss b/src/library/_contents.scss index 57340eb1..5987c71f 100644 --- a/src/library/_contents.scss +++ b/src/library/_contents.scss @@ -6,11 +6,6 @@ @import "menubar"; } - /*= Context Menu ===========================================================*/ - @include Option("userChrome.icon.context_menu") { - @import "contents_menu"; - } - @include OS($linux) { /*= Layout Fixes =========================================================*/ menupopup menu { diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss deleted file mode 100644 index 59ed236a..00000000 --- a/src/library/_contents_menu.scss +++ /dev/null @@ -1,145 +0,0 @@ -menupopup menuitem:not([type="checkbox"], [type="radio"]), -menupopup menu:not([type="checkbox"], [type="radio"]), -#main-menubar > menu { - -moz-appearance: none !important; /* Linux: menulist */ -} - -//-- Mixin --------------------------------------------------------------------- -@function _library_iconTargetSelector($target: "menu") { - // .menu-iconic, .menuitem-iconic: Alreay exist, not target. - // .in-menulist: Not a range because it is a select menu of web content. - // [type="checkbox"], [checked="true"]: There should be a check mark instead of an icon. - @return "#{$target}:not(.#{$target}-iconic, .in-menulist, [type=\"checkbox\"], [checked=\"true\"])"; -} -$_library_menuitemSelector: _library_iconTargetSelector("menuitem"); -$_library_menuSelector: _library_iconTargetSelector("menu"); - -@mixin _library_contextMenu { - #placesContext #{$_library_menuitemSelector}, - #placesContext #{$_library_menuSelector}, - menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) > menuitem, - menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { - @content; - } -} -@mixin _library_nativeContextMenu { - :not(menu, #ContentSelectDropdown) - > menupopup - > #{$_library_menuitemSelector}, - :not(menu, #ContentSelectDropdown) - > menupopup - > #{$_library_menuSelector} { - @content; - } -} - -//------------------------------------------------------------------------------ - -@include _library_contextMenu { - /* 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); -} - -/* For native context menus */ -@include NativeMenu { - @include _library_nativeContextMenu { - list-style-image: var(--menuitem-image) !important; - } -} - -/* Padding */ -:root { - --context-menu-background-padding-default: 5px; - --context-menu-background-padding: var(--context-menu-background-padding-default); -} -@include _library_contextMenu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: var(--context-menu-background-padding) !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"][checked="false"] - > .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 OS($win7, $win8) { - @include _library_contextMenu { - background-position: left var(--context-menu-background-padding) center !important; - padding-inline-start: 0 !important; - } -} -@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 _library_contextMenu { - padding-inline-start: var(--menu-background-padding-default) !important; - margin-left: 0 !important; - } -} - -/* Padding - Linux */ -@include OS($linux) { - :root { - --context-menu-background-padding-default: 6px; - } -} - -/* Padding - Mac */ -@include OS($mac) { - :root { - --context-menu-background-padding-default: 10px; - --context-menu-mac-padding: 21px; - } - - /* context menu width */ - #placesContext #{$_library_menuitemSelector}, - #placesContext #{$_library_menuSelector} { - padding-inline-end: var(--context-menu-background-padding) !important; - - > .menu-text { - /* text position */ - padding-inline-start: var(--context-menu-mac-padding) !important; - } - } - - /* Checkbox menuitem, None iconic menu */ - #placesContext menuitem[type="checkbox"], - #placesContext menu:not(.menu-iconic) { - padding-inline-start: calc(var(--context-menu-background-padding) + var(--context-menu-mac-padding)) !important; - } -} - -/* Icon lists */ -@import "../icons/context_menu/place"; -@import "../icons/library";