diff --git a/src/library/_contents.scss b/src/library/_contents.scss index 1221c84..e1904d1 100644 --- a/src/library/_contents.scss +++ b/src/library/_contents.scss @@ -154,392 +154,7 @@ } /*= Proton ===============================================================*/ - :root { - --organizer-color: -moz-DialogText; - --organizer-deemphasized-color: GrayText; - - --organizer-toolbar-background: -moz-Dialog; - --organizer-pane-background: -moz-Dialog; - --organizer-content-background: -moz-Dialog; - - --organizer-hover-background: SelectedItem; - --organizer-hover-color: SelectedItemText; - --organizer-selected-background: SelectedItem; - --organizer-selected-color: SelectedItemText; - --organizer-outline-color: SelectedItem; - - --organizer-separator-color: ThreeDDarkShadow; - --organizer-border-color: ThreeDShadow; - - --organizer-toolbar-field-background: Field; - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: ThreeDShadow; - --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); - --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); - --organizer-deemphasized-color: var(--in-content-deemphasized-text); - - --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ - --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ - --organizer-content-background: var(--in-content-page-background); - - --organizer-hover-background: var(--in-content-button-background-hover); - --organizer-hover-color: var(--organizer-color); - --organizer-selected-background: var(--in-content-button-background-active); - --organizer-selected-color: var(--organizer-color); - --organizer-outline-color: var(--in-content-primary-button-background); - - --organizer-separator-color: var(--organizer-pane-field-border-color); - --organizer-border-color: var(--in-content-border-color); - - --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: transparent; - --organizer-toolbar-field-focus-border-color: color-mix( - in srgb, - var(--organizer-outline-color) 50%, - transparent - ); - --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); - --organizer-deemphasized-color: rgb(191, 191, 201); - - --organizer-toolbar-background: rgb(43, 42, 51); - --organizer-pane-background: rgb(35, 34, 43); - --organizer-content-background: rgb(28, 27, 34); - - --organizer-hover-background: rgb(82, 82, 94); - --organizer-selected-background: rgb(91, 91, 102); - --organizer-outline-color: rgb(0, 221, 255); - - --organizer-toolbar-field-background: var(--in-content-page-background); - --organizer-toolbar-field-background-focused: rgb(66, 65, 77); - scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); - } - } - } - - /*- Toolbar & Menus ------------------------------------------------------*/ - #placesToolbar { - appearance: none !important; - background-color: var(--organizer-toolbar-background) !important; - color: var(--organizer-color) !important; - 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; - } - - #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; - } - - #placesToolbar > toolbarbutton > .toolbarbutton-icon, - #placesMenu > menu > image, - #placesMenu > menu > .menubar-text { - -moz-context-properties: fill !important; - fill: currentColor !important; - } - - #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; - } - - #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; - } - - /*- Search Bar & Input ---------------------------------------------------*/ - #searchFilter, - #detailsPane html|input { - appearance: none !important; - background-color: var(--organizer-toolbar-field-background) !important; - color: var(--organizer-color) !important; - border: 1px solid var(--organizer-toolbar-field-border-color) !important; - border-radius: 4px !important; - margin: 0 !important; - padding-block: 2px !important; - min-height: 24px !important; - } - - #searchFilter[focused] { - box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; - background-color: var(--organizer-toolbar-field-background-focused) !important; - border-color: transparent !important; - outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; - outline-offset: -2px !important; - } - - /*- Sidebar & Splitter ---------------------------------------------------*/ - #placesList { - background-color: var(--organizer-pane-background) !important; - } - - #placesView > splitter { - border: 0 !important; - border-inline-end: 1px solid var(--organizer-border-color) !important; - min-width: 0 !important; - width: 3px !important; - background-color: transparent !important; - margin-inline-start: -3px !important; - position: relative !important; - } - - /*- Downloads Pane -------------------------------------------------------*/ - #downloadsRichListBox { - color: var(--organizer-color) !important; - background-color: var(--organizer-content-background) !important; - } - - #clearDownloadsButton:focus-visible { - outline: 2px solid var(--organizer-outline-color) !important; - } - - richlistitem[selected="true"], - richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - richlistbox:where(:focus) > richlistitem[selected="true"] { - background-color: var(--organizer-selected-background) !important; - } - - /*- Tree -----------------------------------------------------------------*/ - #contentView treecol { - /* Use box-shadow to draw a bottom border instead of border-bottom - * because otherwise the items on contentView won't be perfectly - * aligned with the items on the sidebar. */ - box-shadow: inset 0 -1px var(--organizer-border-color) !important; - } - - tree { - background-color: var(--organizer-content-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"]), - treecolpicker { - appearance: none !important; - border: none !important; - background-color: var(--in-content-button-background) !important; - color: var(--organizer-color, inherit) !important; - padding: 5px 10px !important; - } - - 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; - } - - treecol:not([hideheader="true"], :first-child), - treecolpicker { - padding-left: 10px !important; - border-inline-start-width: 1px !important; - border-inline-start-style: solid !important; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--organizer-border-color) 20%, - var(--organizer-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1 !important; - } - - treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { - fill: currentColor !important; - width: 18px !important; - height: 18px !important; - } - - 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; - } - - /*- Info Box -------------------------------------------------------------*/ - #detailsPane { - background-color: var(--organizer-pane-background) !important; - color: var(--organizer-color) !important; - padding: 5px !important; - border-top: 1px solid var(--organizer-border-color) !important; - } - - #editBookmarkPanelRows .expander-up, - #editBookmarkPanelRows .expander-down { - appearance: none !important; - min-width: 0 !important; - padding: 5px !important; - margin: 0 !important; - margin-inline-end: 4px !important; - border: 1px solid var(--organizer-pane-field-border-color) !important; - 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 { - 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; - } - - #places input { - border: 1px solid var(--organizer-pane-field-border-color) !important; - border-radius: 4px !important; - background-color: var(--organizer-content-background) !important; - 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; - } - - .caption-label { - margin-inline-start: 8px !important; - color: var(--organizer-deemphasized-color) !important; - } - - #editBMPanel_tagsSelectorRow > richlistbox { - appearance: none !important; - color: var(--organizer-color) !important; - 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; - } - - #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; - } + @import "proton"; /*- Radio Button ---------------------------------------------------------*/ menuitem[type="radio"] { diff --git a/src/library/_proton.scss b/src/library/_proton.scss new file mode 100644 index 0000000..c98175e --- /dev/null +++ b/src/library/_proton.scss @@ -0,0 +1,386 @@ +:root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --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); + --organizer-deemphasized-color: var(--in-content-deemphasized-text); + + --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ + --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ + --organizer-content-background: var(--in-content-page-background); + + --organizer-hover-background: var(--in-content-button-background-hover); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: var(--in-content-button-background-active); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: var(--in-content-primary-button-background); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: var(--in-content-border-color); + + --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix( + in srgb, + var(--organizer-outline-color) 50%, + transparent + ); + --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); + --organizer-deemphasized-color: rgb(191, 191, 201); + + --organizer-toolbar-background: rgb(43, 42, 51); + --organizer-pane-background: rgb(35, 34, 43); + --organizer-content-background: rgb(28, 27, 34); + + --organizer-hover-background: rgb(82, 82, 94); + --organizer-selected-background: rgb(91, 91, 102); + --organizer-outline-color: rgb(0, 221, 255); + + --organizer-toolbar-field-background: var(--in-content-page-background); + --organizer-toolbar-field-background-focused: rgb(66, 65, 77); + scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); + } + } +} + +/*- Toolbar & Menus ------------------------------------------------------*/ +#placesToolbar { + appearance: none !important; + background-color: var(--organizer-toolbar-background) !important; + color: var(--organizer-color) !important; + 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; +} + +#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; +} + +#placesToolbar > toolbarbutton > .toolbarbutton-icon, +#placesMenu > menu > image, +#placesMenu > menu > .menubar-text { + -moz-context-properties: fill !important; + fill: currentColor !important; +} + +#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; +} + +#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; +} + +/*- Search Bar & Input ---------------------------------------------------*/ +#searchFilter, +#detailsPane html|input { + appearance: none !important; + background-color: var(--organizer-toolbar-field-background) !important; + color: var(--organizer-color) !important; + border: 1px solid var(--organizer-toolbar-field-border-color) !important; + border-radius: 4px !important; + margin: 0 !important; + padding-block: 2px !important; + min-height: 24px !important; +} + +#searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; + background-color: var(--organizer-toolbar-field-background-focused) !important; + border-color: transparent !important; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; + outline-offset: -2px !important; +} + +/*- Sidebar & Splitter ---------------------------------------------------*/ +#placesList { + background-color: var(--organizer-pane-background) !important; +} + +#placesView > splitter { + border: 0 !important; + border-inline-end: 1px solid var(--organizer-border-color) !important; + min-width: 0 !important; + width: 3px !important; + background-color: transparent !important; + margin-inline-start: -3px !important; + position: relative !important; +} + +/*- Downloads Pane -------------------------------------------------------*/ +#downloadsRichListBox { + color: var(--organizer-color) !important; + background-color: var(--organizer-content-background) !important; +} + +#clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color) !important; +} + +richlistitem[selected="true"], +richlistitem:hover { + background-color: var(--organizer-hover-background) !important; + color: var(--organizer-color) !important; +} + +richlistbox:where(:focus) > richlistitem[selected="true"] { + background-color: var(--organizer-selected-background) !important; +} + +/*- Tree -----------------------------------------------------------------*/ +#contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) !important; +} + +tree { + background-color: var(--organizer-content-background) !important; + color: var(--organizer-color) !important; +} + +treecol:not([hideheader="true"]), +treecolpicker { + appearance: none !important; + border: none !important; + background-color: var(--in-content-button-background) !important; + color: var(--organizer-color, inherit) !important; + padding: 5px 10px !important; +} + +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; +} + +treecol:not([hideheader="true"], :first-child), +treecolpicker { + padding-left: 10px !important; + border-inline-start-width: 1px !important; + border-inline-start-style: solid !important; + border-image: linear-gradient( + transparent 0%, + transparent 20%, + var(--organizer-border-color) 20%, + var(--organizer-border-color) 80%, + transparent 80%, + transparent 100% + ) + 1 1 !important; +} + +treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { + fill: currentColor !important; + width: 18px !important; + height: 18px !important; +} + +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; +} + +/*- Info Box -------------------------------------------------------------*/ +#detailsPane { + background-color: var(--organizer-pane-background) !important; + color: var(--organizer-color) !important; + padding: 5px !important; + border-top: 1px solid var(--organizer-border-color) !important; +} + +#editBookmarkPanelRows .expander-up, +#editBookmarkPanelRows .expander-down { + appearance: none !important; + min-width: 0 !important; + padding: 5px !important; + margin: 0 !important; + margin-inline-end: 4px !important; + border: 1px solid var(--organizer-pane-field-border-color) !important; + 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 { + 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; +} + +#places input { + border: 1px solid var(--organizer-pane-field-border-color) !important; + border-radius: 4px !important; + background-color: var(--organizer-content-background) !important; + 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; +} + +.caption-label { + margin-inline-start: 8px !important; + color: var(--organizer-deemphasized-color) !important; +} + +#editBMPanel_tagsSelectorRow > richlistbox { + appearance: none !important; + color: var(--organizer-color) !important; + 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; +} + +#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/src/theme/proton_chrome/_library_popup.scss b/src/theme/proton_chrome/_library_popup.scss index 6e91664..f7e2aa6 100644 --- a/src/theme/proton_chrome/_library_popup.scss +++ b/src/theme/proton_chrome/_library_popup.scss @@ -2,391 +2,6 @@ @-moz-document url("chrome://browser/content/places/places.xhtml") { @include OS($linux) { - :root { - --organizer-color: -moz-DialogText; - --organizer-deemphasized-color: GrayText; - - --organizer-toolbar-background: -moz-Dialog; - --organizer-pane-background: -moz-Dialog; - --organizer-content-background: -moz-Dialog; - - --organizer-hover-background: SelectedItem; - --organizer-hover-color: SelectedItemText; - --organizer-selected-background: SelectedItem; - --organizer-selected-color: SelectedItemText; - --organizer-outline-color: SelectedItem; - - --organizer-separator-color: ThreeDDarkShadow; - --organizer-border-color: ThreeDShadow; - - --organizer-toolbar-field-background: Field; - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: ThreeDShadow; - --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); - --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); - --organizer-deemphasized-color: var(--in-content-deemphasized-text); - - --organizer-toolbar-background: rgb(249, 249, 251); /* --toolbar-bgcolor */ - --organizer-pane-background: rgb(229, 229, 235); /* --lwt-accent-color */ - --organizer-content-background: var(--in-content-page-background); - - --organizer-hover-background: var(--in-content-button-background-hover); - --organizer-hover-color: var(--organizer-color); - --organizer-selected-background: var(--in-content-button-background-active); - --organizer-selected-color: var(--organizer-color); - --organizer-outline-color: var(--in-content-primary-button-background); - - --organizer-separator-color: var(--organizer-pane-field-border-color); - --organizer-border-color: var(--in-content-border-color); - - --organizer-toolbar-field-background: rgb(240, 240, 244); /* --lwt-accent-color */ - --organizer-toolbar-field-background-focused: Field; - --organizer-toolbar-field-border-color: transparent; - --organizer-toolbar-field-focus-border-color: color-mix( - in srgb, - var(--organizer-outline-color) 50%, - transparent - ); - --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); - --organizer-deemphasized-color: rgb(191, 191, 201); - - --organizer-toolbar-background: rgb(43, 42, 51); - --organizer-pane-background: rgb(35, 34, 43); - --organizer-content-background: rgb(28, 27, 34); - - --organizer-hover-background: rgb(82, 82, 94); - --organizer-selected-background: rgb(91, 91, 102); - --organizer-outline-color: rgb(0, 221, 255); - - --organizer-toolbar-field-background: var(--in-content-page-background); - --organizer-toolbar-field-background-focused: rgb(66, 65, 77); - scrollbar-color: rgba(249, 249, 250, 0.4) rgba(20, 20, 25, 0.3); - } - } - } - - /*- Toolbar & Menus ------------------------------------------------------*/ - #placesToolbar { - appearance: none !important; - background-color: var(--organizer-toolbar-background) !important; - color: var(--organizer-color) !important; - 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; - } - - #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; - } - - #placesToolbar > toolbarbutton > .toolbarbutton-icon, - #placesMenu > menu > image, - #placesMenu > menu > .menubar-text { - -moz-context-properties: fill !important; - fill: currentColor !important; - } - - #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; - } - - #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; - } - - /*- Search Bar & Input ---------------------------------------------------*/ - #searchFilter, - #detailsPane html|input { - appearance: none !important; - background-color: var(--organizer-toolbar-field-background) !important; - color: var(--organizer-color) !important; - border: 1px solid var(--organizer-toolbar-field-border-color) !important; - border-radius: 4px !important; - margin: 0 !important; - padding-block: 2px !important; - min-height: 24px !important; - } - - #searchFilter[focused] { - box-shadow: var(--organizer-toolbar-field-focus-box-shadow) !important; - background-color: var(--organizer-toolbar-field-background-focused) !important; - border-color: transparent !important; - outline: 2px solid var(--organizer-toolbar-field-focus-border-color) !important; - outline-offset: -2px !important; - } - - /*- Sidebar & Splitter ---------------------------------------------------*/ - #placesList { - background-color: var(--organizer-pane-background) !important; - } - - #placesView > splitter { - border: 0 !important; - border-inline-end: 1px solid var(--organizer-border-color) !important; - min-width: 0 !important; - width: 3px !important; - background-color: transparent !important; - margin-inline-start: -3px !important; - position: relative !important; - } - - /*- Downloads Pane -------------------------------------------------------*/ - #downloadsRichListBox { - color: var(--organizer-color) !important; - background-color: var(--organizer-content-background) !important; - } - - #clearDownloadsButton:focus-visible { - outline: 2px solid var(--organizer-outline-color) !important; - } - - richlistitem[selected="true"], - richlistitem:hover { - background-color: var(--organizer-hover-background) !important; - color: var(--organizer-color) !important; - } - - richlistbox:where(:focus) > richlistitem[selected="true"] { - background-color: var(--organizer-selected-background) !important; - } - - /*- Tree -----------------------------------------------------------------*/ - #contentView treecol { - /* Use box-shadow to draw a bottom border instead of border-bottom - * because otherwise the items on contentView won't be perfectly - * aligned with the items on the sidebar. */ - box-shadow: inset 0 -1px var(--organizer-border-color) !important; - } - - tree { - background-color: var(--organizer-content-background) !important; - color: var(--organizer-color) !important; - } - - treecol:not([hideheader="true"]), - treecolpicker { - appearance: none !important; - border: none !important; - background-color: var(--in-content-button-background) !important; - color: var(--organizer-color, inherit) !important; - padding: 5px 10px !important; - } - - 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; - } - - treecol:not([hideheader="true"], :first-child), - treecolpicker { - padding-left: 10px !important; - border-inline-start-width: 1px !important; - border-inline-start-style: solid !important; - border-image: linear-gradient( - transparent 0%, - transparent 20%, - var(--organizer-border-color) 20%, - var(--organizer-border-color) 80%, - transparent 80%, - transparent 100% - ) - 1 1 !important; - } - - treecol[sortDirection]:not([hideheader="true"]) > xul|*.treecol-sortdirection { - fill: currentColor !important; - width: 18px !important; - height: 18px !important; - } - - 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; - } - - /*- Info Box -------------------------------------------------------------*/ - #detailsPane { - background-color: var(--organizer-pane-background) !important; - color: var(--organizer-color) !important; - padding: 5px !important; - border-top: 1px solid var(--organizer-border-color) !important; - } - - #editBookmarkPanelRows .expander-up, - #editBookmarkPanelRows .expander-down { - appearance: none !important; - min-width: 0 !important; - padding: 5px !important; - margin: 0 !important; - margin-inline-end: 4px !important; - border: 1px solid var(--organizer-pane-field-border-color) !important; - 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 { - 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; - } - - #places input { - border: 1px solid var(--organizer-pane-field-border-color) !important; - border-radius: 4px !important; - background-color: var(--organizer-content-background) !important; - 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; - } - - .caption-label { - margin-inline-start: 8px !important; - color: var(--organizer-deemphasized-color) !important; - } - - #editBMPanel_tagsSelectorRow > richlistbox { - appearance: none !important; - color: var(--organizer-color) !important; - 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; - } - - #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; - } + @import "../../library/proton"; } }