diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6b1082d..68d55d4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2299,7 +2299,6 @@ --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; } - @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); @@ -2328,7 +2327,6 @@ --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); } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --organizer-color: rgb(251, 251, 254); @@ -2344,6 +2342,7 @@ } } } + /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; @@ -2353,22 +2352,18 @@ padding: 4px !important; padding-inline-end: 6px !important; } - #placesToolbar > toolbarbutton { appearance: none !important; padding: 5px !important; border-radius: 4px !important; } - #placesToolbar > toolbarbutton[disabled] { opacity: 0.6 !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover:active { background-color: var(--organizer-selected-background) !important; } @@ -2383,7 +2378,6 @@ #placesMenu { margin-inline-start: 6px !important; } - #placesMenu > menu { appearance: none !important; color: var(--organizer-color) !important; @@ -2392,19 +2386,16 @@ padding-inline-start: 5px !important; margin-inline-end: 2px !important; } - #placesMenu > menu[_moz-menuactive="true"], #placesMenu > menu:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesMenu > menu:hover:active, #placesMenu > menu[open] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #placesMenu > menu > .menubar-text { margin-block: 0 !important; /* override menu.css */ @@ -2495,7 +2486,6 @@ background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } - treecol:not([hideheader="true"], [sortable="false"]):hover:active, treecolpicker:hover:active { background-color: var(--organizer-selected-background) !important; @@ -2526,38 +2516,31 @@ treechildren::-moz-tree-row { background-color: transparent !important; } - treechildren::-moz-tree-row(hover) { background-color: var(--organizer-hover-background) !important; } - treechildren::-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) { color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-image(selected), treechildren::-moz-tree-twisty(selected), treechildren::-moz-tree-cell-text(selected) { color: var(--organizer-selected-color) !important; } - treechildren::-moz-tree-separator { height: 1px !important; border-color: var(--organizer-separator-color) !important; } - treechildren::-moz-tree-separator(hover) { border-color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-separator(selected) { border-color: var(--organizer-selected-color) !important; } @@ -2581,36 +2564,34 @@ 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 { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBookmarkPanelRows .expander-up:hover:active, #editBookmarkPanelRows .expander-down:hover:active { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #editBookmarkPanelRows .expander-up:focus-visible, #editBookmarkPanelRows .expander-down:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !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"); } - - #editBookmarkPanelRows .expander-up > .button-box, - #editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; + #editBookmarkPanelRows .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); } #places input { @@ -2621,12 +2602,10 @@ min-height: 20px !important; padding-inline: 4px !important; } - #places input:focus { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } - #places input:not(:read-write):focus { outline: none !important; } @@ -2643,16 +2622,13 @@ border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { border: 1px solid transparent !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; diff --git a/css/leptonContent.css b/css/leptonContent.css index 371e445..f7e03e6 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -2042,10 +2042,10 @@ @supports -moz-bool-pref("widget.macos.native-context-menus") { :not(menu, #ContentSelectDropdown) > menupopup - > menuitem:not(.menuitem-iconic, [type="checkbox"], [checked="true"], .in-menulist), + > menuitem:not(.menuitem-iconic, .in-menulist, [type="checkbox"], [checked="true"]), :not(menu, #ContentSelectDropdown) > menupopup - > menu:not(.menu-iconic, [type="checkbox"], [checked="true"], .in-menulist) { + > menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { list-style-image: var(--menuitem-image) !important; } } @@ -2142,10 +2142,9 @@ #placesContext menu:not(.menu-iconic, .in-menulist, [type="checkbox"], [checked="true"]) { padding-inline-end: var(--context-menu-background-padding) !important; } - - /* text position */ #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; } @@ -2360,7 +2359,6 @@ --organizer-toolbar-field-focus-box-shadow: unset; --organizer-pane-field-border-color: ThreeDShadow; } - @media not all and (prefers-contrast) { :root { --organizer-color: var(--in-content-page-color); @@ -2389,7 +2387,6 @@ --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); } - @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { :root { --organizer-color: rgb(251, 251, 254); @@ -2405,6 +2402,7 @@ } } } + /*- Toolbar & Menus ------------------------------------------------------*/ #placesToolbar { appearance: none !important; @@ -2414,22 +2412,18 @@ padding: 4px !important; padding-inline-end: 6px !important; } - #placesToolbar > toolbarbutton { appearance: none !important; padding: 5px !important; border-radius: 4px !important; } - #placesToolbar > toolbarbutton[disabled] { opacity: 0.6 !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesToolbar > toolbarbutton:not([disabled]):hover:active { background-color: var(--organizer-selected-background) !important; } @@ -2444,7 +2438,6 @@ #placesMenu { margin-inline-start: 6px !important; } - #placesMenu > menu { appearance: none !important; color: var(--organizer-color) !important; @@ -2453,19 +2446,16 @@ padding-inline-start: 5px !important; margin-inline-end: 2px !important; } - #placesMenu > menu[_moz-menuactive="true"], #placesMenu > menu:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #placesMenu > menu:hover:active, #placesMenu > menu[open] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #placesMenu > menu > .menubar-text { margin-block: 0 !important; /* override menu.css */ @@ -2556,7 +2546,6 @@ background-color: var(--organizer-hover-background) !important; color: var(--organizer-color) !important; } - treecol:not([hideheader="true"], [sortable="false"]):hover:active, treecolpicker:hover:active { background-color: var(--organizer-selected-background) !important; @@ -2587,38 +2576,31 @@ treechildren::-moz-tree-row { background-color: transparent !important; } - treechildren::-moz-tree-row(hover) { background-color: var(--organizer-hover-background) !important; } - treechildren::-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) { color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-image(selected), treechildren::-moz-tree-twisty(selected), treechildren::-moz-tree-cell-text(selected) { color: var(--organizer-selected-color) !important; } - treechildren::-moz-tree-separator { height: 1px !important; border-color: var(--organizer-separator-color) !important; } - treechildren::-moz-tree-separator(hover) { border-color: var(--organizer-hover-color) !important; } - treechildren::-moz-tree-separator(selected) { border-color: var(--organizer-selected-color) !important; } @@ -2642,36 +2624,34 @@ 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 { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBookmarkPanelRows .expander-up:hover:active, #editBookmarkPanelRows .expander-down:hover:active { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; } - #editBookmarkPanelRows .expander-up:focus-visible, #editBookmarkPanelRows .expander-down:focus-visible { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !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"); } - - #editBookmarkPanelRows .expander-up > .button-box, - #editBookmarkPanelRows .expander-down > .button-box { - padding: 0 !important; + #editBookmarkPanelRows .expander-down { + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); } #places input { @@ -2682,12 +2662,10 @@ min-height: 20px !important; padding-inline: 4px !important; } - #places input:focus { outline: 2px solid var(--organizer-outline-color) !important; outline-offset: -1px !important; } - #places input:not(:read-write):focus { outline: none !important; } @@ -2704,16 +2682,13 @@ border: 1px solid var(--organizer-border-color) !important; border-radius: 4px !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem { border: 1px solid transparent !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { background-color: var(--organizer-hover-background) !important; color: var(--organizer-hover-color) !important; } - #editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { background-color: var(--organizer-selected-background) !important; color: var(--organizer-selected-color) !important; @@ -2724,32 +2699,21 @@ /* margin-inline-start: 0 !important; */ appearance: none !important; } - 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; + padding: 0 !important; + margin-inline: 0 6px !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 */ } - - 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; - } - - menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-active) !important; - } - menuitem[type="radio"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { -moz-context-properties: fill !important; fill: currentColor !important; @@ -2760,18 +2724,22 @@ /* Style the button also when printing with "Print Backgrounds" unchecked */ color-adjust: exact !important; } - + 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; + } + menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { + background-color: var(--in-content-button-background-active) !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; @@ -2781,10 +2749,6 @@ 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; } @@ -2795,67 +2759,49 @@ -moz-box-align: center !important; margin: 0px 2px !important; } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-inline-end: 2px !important; - } - - menuitem[type="checkbox"] > .menu-iconic-text { - margin: 1px 0 !important; - } - - menuitem[type="checkbox"][disabled="true"] { - opacity: 0.4 !important; - } - 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; + 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 */ } - - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - height: 16px !important; - width: 16px !important; + menuitem[type="checkbox"] > .menu-iconic-left[checked="true"] > .menu-iconic-icon { + -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; } - 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 { @@ -2864,23 +2810,19 @@ 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; } - @media (prefers-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; } - 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; } - menuitem[type="checkbox"]:not([disabled="true"]):hover:active > .menu-iconic-left[checked="true"] > .menu-iconic-icon, @@ -2891,9 +2833,11 @@ fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; } } - /* From common.css */ - menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-block: 2px !important; + menuitem[type="checkbox"] > .menu-iconic-text { + margin: 1px 0 !important; + } + menuitem[type="checkbox"][disabled="true"] { + opacity: 0.4 !important; } /*- Menu Separtor --------------------------------------------------------*/ @@ -2903,8 +2847,8 @@ 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); } } } diff --git a/src/library/_chrome.scss b/src/library/_chrome.scss index ef6931b..9679e20 100644 --- a/src/library/_chrome.scss +++ b/src/library/_chrome.scss @@ -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") { diff --git a/src/library/_contents.scss b/src/library/_contents.scss index 0e1dda3..57340eb 100644 --- a/src/library/_contents.scss +++ b/src/library/_contents.scss @@ -2,10 +2,7 @@ { /** Library - Icons Replace *************************************************/ @include Option("userChrome.icon.library") { - @import "standard_folder"; - @import "inbox"; - @import "default_override"; - @import "default_open"; + @import "folder_icons"; @import "menubar"; } diff --git a/src/library/_contents_menu.scss b/src/library/_contents_menu.scss index a089f46..74c7f22 100644 --- a/src/library/_contents_menu.scss +++ b/src/library/_contents_menu.scss @@ -4,10 +4,35 @@ menupopup menu:not([type="checkbox"], [type="radio"]), -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 { +@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; @@ -20,12 +45,7 @@ menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { /* 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) { + @include _library_nativeContextMenu { list-style-image: var(--menuitem-image) !important; } } @@ -35,10 +55,7 @@ menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { --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 { +@include _library_contextMenu { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: var(--context-menu-background-padding) !important; } @@ -68,10 +85,7 @@ menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { } } @include OS($win7, $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 { + @include _library_contextMenu { background-position: left var(--context-menu-background-padding) center !important; padding-inline-start: 0 !important; } @@ -85,10 +99,7 @@ menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { ); } - #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 { + @include _library_contextMenu { padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } @@ -109,15 +120,14 @@ menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) > menu { } /* 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"]) { + #placesContext #{$_library_menuitemSelector}, + #placesContext #{$_library_menuSelector} { padding-inline-end: var(--context-menu-background-padding) !important; - } - /* text position */ - #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 { - padding-inline-start: var(--context-menu-mac-padding) !important; + > .menu-text { + /* text position */ + padding-inline-start: var(--context-menu-mac-padding) !important; + } } /* Checkbox menuitem, None iconic menu */ diff --git a/src/library/_default_open.scss b/src/library/_default_open.scss deleted file mode 100644 index 5fb2e31..0000000 --- a/src/library/_default_open.scss +++ /dev/null @@ -1,42 +0,0 @@ -/*= 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" */ -} diff --git a/src/library/_default_override.scss b/src/library/_default_override.scss deleted file mode 100644 index 0d662b9..0000000 --- a/src/library/_default_override.scss +++ /dev/null @@ -1,42 +0,0 @@ -/*= 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; -} diff --git a/src/library/_folder_icons.scss b/src/library/_folder_icons.scss new file mode 100644 index 0000000..9b33496 --- /dev/null +++ b/src/library/_folder_icons.scss @@ -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" */ +} diff --git a/src/library/_inbox.scss b/src/library/_inbox.scss deleted file mode 100644 index 7bd8040..0000000 --- a/src/library/_inbox.scss +++ /dev/null @@ -1,23 +0,0 @@ -/*= 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; -} diff --git a/src/library/_proton.scss b/src/library/_proton.scss index 4d4b05c..86ba436 100644 --- a/src/library/_proton.scss +++ b/src/library/_proton.scss @@ -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 { + @include NotContrast { --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 { + @include Dark { --organizer-color: rgb(251, 251, 254); --organizer-deemphasized-color: rgb(191, 191, 201); @@ -80,25 +76,23 @@ border-bottom: 1px solid var(--organizer-border-color) !important; padding: 4px !important; padding-inline-end: 6px !important; -} -#placesToolbar > toolbarbutton { - appearance: none !important; - padding: 5px !important; - border-radius: 4px !important; -} + > toolbarbutton { + appearance: none !important; + padding: 5px !important; + border-radius: 4px !important; -#placesToolbar > toolbarbutton[disabled] { - opacity: 0.6 !important; -} - -#placesToolbar > toolbarbutton:not([disabled]):hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#placesToolbar > toolbarbutton:not([disabled]):hover:active { - background-color: var(--organizer-selected-background) !important; + &[disabled] { + opacity: 0.6 !important; + } + &:not([disabled]):hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + &:active { + background-color: var(--organizer-selected-background) !important; + } + } + } } #placesToolbar > toolbarbutton > .toolbarbutton-icon, @@ -110,32 +104,30 @@ #placesMenu { margin-inline-start: 6px !important; -} -#placesMenu > 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; -} + > 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 { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#placesMenu > menu:hover:active, -#placesMenu > menu[open] { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; -} - -#placesMenu > menu > .menubar-text { - margin-block: 0 !important; /* override menu.css */ - padding-inline-end: 4px !important; + &[_moz-menuactive="true"], + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + &:hover:active, + &[open] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 4px !important; + } + } } /*- Search Bar & Input ---------------------------------------------------*/ @@ -221,11 +213,10 @@ 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 { - background-color: var(--organizer-selected-background) !important; + &:active { + background-color: var(--organizer-selected-background) !important; + } } treecol:not([hideheader="true"], :first-child), @@ -250,43 +241,40 @@ treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { height: 18px !important; } -treechildren::-moz-tree-row { - background-color: transparent !important; -} +treechildren { + &::-moz-tree-row { + background-color: transparent !important; + } + &::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background) !important; + } + &::-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-row(hover) { - background-color: var(--organizer-hover-background) !important; -} + &::-moz-tree-image(hover), + &::-moz-tree-twisty(hover), + &::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color) !important; + } + &::-moz-tree-image(selected), + &::-moz-tree-twisty(selected), + &::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color) !important; + } -treechildren::-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) { - color: var(--organizer-hover-color) !important; -} - -treechildren::-moz-tree-image(selected), -treechildren::-moz-tree-twisty(selected), -treechildren::-moz-tree-cell-text(selected) { - color: var(--organizer-selected-color) !important; -} - -treechildren::-moz-tree-separator { - height: 1px !important; - border-color: var(--organizer-separator-color) !important; -} - -treechildren::-moz-tree-separator(hover) { - border-color: var(--organizer-hover-color) !important; -} - -treechildren::-moz-tree-separator(selected) { - border-color: var(--organizer-selected-color) !important; + &::-moz-tree-separator { + height: 1px !important; + border-color: var(--organizer-separator-color) !important; + } + &::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color) !important; + } + &::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color) !important; + } } /*- Info Box -------------------------------------------------------------*/ @@ -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; + + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + + &:active { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } + &:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + + > .button-box { + padding: 0 !important; + } } -#editBookmarkPanelRows .expander-up:hover, -#editBookmarkPanelRows .expander-down:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#editBookmarkPanelRows .expander-up:hover:active, -#editBookmarkPanelRows .expander-down:hover:active { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; -} - -#editBookmarkPanelRows .expander-up:focus-visible, -#editBookmarkPanelRows .expander-down: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"); -} - -#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,15 +334,14 @@ treechildren::-moz-tree-separator(selected) { color: var(--organizer-color) !important; min-height: 20px !important; padding-inline: 4px !important; -} -#places input:focus { - outline: 2px solid var(--organizer-outline-color) !important; - outline-offset: -1px !important; -} - -#places input:not(:read-write):focus { - outline: none !important; + &:focus { + outline: 2px solid var(--organizer-outline-color) !important; + outline-offset: -1px !important; + } + &:not(:read-write):focus { + outline: none !important; + } } .caption-label { @@ -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 { - border: 1px solid transparent !important; -} + > richlistitem { + border: 1px solid transparent !important; -#editBMPanel_tagsSelectorRow > richlistbox > richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-hover-color) !important; -} - -#editBMPanel_tagsSelectorRow > richlistbox > richlistitem[selected] { - background-color: var(--organizer-selected-background) !important; - color: var(--organizer-selected-color) !important; + &:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-hover-color) !important; + } + &[selected] { + background-color: var(--organizer-selected-background) !important; + color: var(--organizer-selected-color) !important; + } + } } diff --git a/src/library/_proton_contents.scss b/src/library/_proton_contents.scss index dc62bbb..99282c3 100644 --- a/src/library/_proton_contents.scss +++ b/src/library/_proton_contents.scss @@ -1,66 +1,71 @@ +$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; -} -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 */ -} + #{$iconSelector} { + appearance: none !important; + width: 16px !important; + height: 16px !important; -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; -} + border: 1px solid var(--in-content-box-border-color) !important; + border-radius: 100% !important; -menuitem[type="radio"]:not([disabled="true"]):hover:active > .menu-iconic-left > .menu-iconic-icon { - background-color: var(--in-content-button-background-active) !important; -} + padding: 0 !important; + margin-inline: 0 6px !important; + margin-block: 2px !important; /* extend the vertical clicktarget */ -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; + background-color: var(--in-content-button-background) !important; + background-position: center !important; - /* Style the button also when printing with "Print Backgrounds" unchecked */ - color-adjust: exact !important; -} + flex-shrink: 0 !important; /* avoid shrinking inside flex container */ + } + #{$checkedIconSelector} { + -moz-context-properties: fill !important; + fill: currentColor !important; + color: var(--in-content-primary-button-text-color) !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; -} + background-color: var(--in-content-primary-button-background) !important; + background-image: url("chrome://global/skin/icons/radio.svg") !important; + border-color: transparent !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; -} + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; + } -menuitem[type="radio"] > .menu-iconic-text { - margin-inline: 0 8px !important; - padding-inline-start: 0 !important; + &:not([disabled="true"]):hover { + #{$iconSelector} { + background-color: var(--in-content-button-background-hover) !important; + color: var(--in-content-button-text-color-hover) !important; + } + &:active #{$iconSelector} { + background-color: var(--in-content-button-background-active) !important; + } + } + + &:not([disabled="true"])[checked="true"]:hover { + #{$iconSelector} { + background-color: var(--in-content-primary-button-background-hover) !important; + color: var(--in-content-primary-button-text-color-hover) !important; + } + &:active #{$iconSelector} { + background-color: var(--in-content-primary-button-background-active) !important; + } + } + + > .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; } @@ -70,104 +75,96 @@ menuitem[type="checkbox"] { appearance: none !important; -moz-box-align: center !important; margin: 0px 2px !important; -} -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-inline-end: 2px !important; -} -menuitem[type="checkbox"] > .menu-iconic-text { - margin: 1px 0 !important; -} + #{$iconSelector} { + appearance: none !important; + width: 16px !important; + height: 16px !important; -menuitem[type="checkbox"][disabled="true"] { - opacity: 0.4 !important; -} + border: 1px solid currentColor !important; + border-radius: 2px !important; -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; -} + color: var(--checkbox-border-color, ThreeDDarkShadow) !important; + background-color: var(--checkbox-unchecked-bgcolor, Field) !important; -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - height: 16px !important; - width: 16px !important; -} + margin-inline-end: 6px !important; /* or 2px */ + margin-block: 2px !important; /* From common.css */ + } + #{$checkedIconSelector} { + -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; -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; -} + 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; -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; -} - -@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; + /* Style the button also when printing with "Print Backgrounds" unchecked */ + color-adjust: exact !important; } - 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; + &:not([disabled="true"]):hover { + #{$iconSelector} { + background-color: var( + --checkbox-unchecked-hover-bgcolor, + color-mix(in srgb, -moz-accent-color 4%, Field) + ) !important; + } + &:active #{$iconSelector} { + background-color: var( + --checkbox-unchecked-active-bgcolor, + color-mix(in srgb, -moz-accent-color 8%, Field) + ) !important; + } + + #{$checkedIconSelector} { + background-color: var( + --checkbox-checked-hover-bgcolor, + color-mix(in srgb, currentColor 12.5%, -moz-accent-color) + ) !important; + } + &:active #{$checkedIconSelector} { + background-color: var( + --checkbox-checked-active-bgcolor, + color-mix(in srgb, currentColor 25%, -moz-accent-color) + ) !important; + } } - 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; + &:focus #{$iconSelector} { + outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important; + outline-offset: var(--focus-outline-offset, 2px) !important; } -} -/* From common.css */ -menuitem[type="checkbox"] > .menu-iconic-left > .menu-iconic-icon { - margin-block: 2px !important; + @include Contrast { + &:not([disabled="true"]) #{$iconSelector} { + /* 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; + } + + > .menu-iconic-left[checked="true"] { + color: var(--checkbox-checked-border-color, currentColor) !important; + fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important; + } + + &:not([disabled="true"]):hover:active, + &:not([disabled="true"]):hover { + #{$checkedIconSelector} { + color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important; + } + } + } + + > .menu-iconic-text { + margin: 1px 0 !important; + } + + &[disabled="true"] { + opacity: 0.4 !important; + } } /*- Menu Separtor --------------------------------------------------------*/ @@ -175,8 +172,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); } diff --git a/src/library/_standard_folder.scss b/src/library/_standard_folder.scss deleted file mode 100644 index 87b88f0..0000000 --- a/src/library/_standard_folder.scss +++ /dev/null @@ -1,21 +0,0 @@ -/*= 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; -}