Download:
child 224:667352b3e8d2
parent 222:807345aad816
223:ce73d0a1c827
Anton Shestakov <av6@dwimlabs.net>, Mon, 17 Jan 2022 00:03:33 +0300
firefox: quantum/photon/whatever-else-they-call-it style for tabs

1 файлов изменено, 185 вставок(+), 0 удалений(-) [+]
.mozilla/firefox/profile/chrome/userChrome.css file | annotate | diff | comparison | revisions
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.mozilla/firefox/profile/chrome/userChrome.css Mon Jan 17 00:03:33 2022 +0300
@@ -0,0 +1,185 @@
+/*** Proton Tabs Tweaks ***/
+
+/* Adjust tab corner shape, optionally remove space below tabs */
+
+#tabbrowser-tabs {
+ --user-tab-rounding: 0px;
+}
+
+.tab-background {
+ border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
+ margin-block: 1px 0 !important;
+}
+/* 1/12/2022 Tone down the Fx96 tab border with add-on themes */
+.tab-background:is([selected], [multiselected]):-moz-lwtheme {
+ border-color: rgba(0, 0, 0, 0.5) !important;
+ border-bottom-color: transparent !important;
+}
+[brighttext="true"] .tab-background:is([selected], [multiselected]):-moz-lwtheme {
+ border-color: rgba(255, 255, 255, 0.5) !important;
+ border-bottom-color: transparent !important;
+}
+#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
+ border-top-width: 1px !important;
+ border-bottom-width: 0 !important;
+}
+/* Container color bar visibility */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+ margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
+}
+
+/* Override Normal Density height to Compact Density height only for tabs */
+
+#TabsToolbar, #tabbrowser-tabs {
+ --tab-min-height: 31px !important;
+}
+ /* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
+#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
+#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
+ --tab-min-height: 32px !important;
+}
+#scrollbutton-up,
+#scrollbutton-down {
+ border-top-width: 0 !important;
+ border-bottom-width: 0 !important;
+}
+
+ /* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
+#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox {
+ max-height: calc(var(--tab-min-height) + 1px) !important;
+}
+ /* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
+#TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon,
+#TabsToolbar-customization-target .toolbarbutton-text,
+#TabsToolbar-customization-target .toolbarbutton-badge-stack,
+#scrollbutton-up,#scrollbutton-down {
+ padding-top: 7px !important;
+ padding-bottom: 6px !important;
+}
+
+/* Inactive tabs: Separator line style */
+
+.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
+ border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
+}
+/* For dark backgrounds */
+[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
+ border-right: 1px solid var(--lwt-background-tab-separator-color, var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20))) !important;
+}
+.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
+ border-radius: 0 !important;
+}
+/* Remove padding between tabs */
+.tabbrowser-tab {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+}
+
+/* Move container color bar to bottom of tab */
+
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+ margin-top: calc(var(--tab-min-height) - 2px) !important;
+}
+
+/* Emulate blue tab line from Photon 57-88 UI */
+
+/* Set size and position of the bar relative to background */
+.tab-background::before {
+ content: "";
+ display: block;
+ height: 3px;
+ margin: -1px var(--user-tab-rounding) 0;
+}
+/* Set color for active tab */
+.tabbrowser-tab[selected] .tab-background::before {
+ background-color: #0a84ff;
+}
+/* Set color for other selected tabs */
+.tabbrowser-tab[multiselected]:not([selected]) .tab-background::before {
+ background-color: color-mix(in srgb, #0a84ff 66%, transparent);
+}
+/* Set color for hovering on non-active/non-selected tabs */
+.tabbrowser-tab:not([selected], [multiselected]):hover .tab-background::before {
+ background-color: color-mix(in srgb, currentColor 33%, transparent);
+ transform: none;
+}
+/* [Optional] Animation when hovering non-active/non-selected tabs */
+/*
+.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
+ transform: scaleX(.8);
+ transition: transform 100ms linear;
+}
+*/
+
+/* Adjust margin on blue tab line for squared background tabs */
+.tabbrowser-tab:not([selected], [multiselected]) .tab-background::before {
+ margin: -1px 0 0 !important;
+}
+
+/*** Audio Playing / Mute Button side-by-side when sound is playing ***/
+
+#TabsToolbar {
+ --user-mute-button-height: 20px; /* default size is 12px, site icon is 16px */
+}
+
+/* Move the mute/unmute button to the right and enlarge it */
+.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) {
+ width: var(--user-mute-button-height) !important;
+ height: var(--user-mute-button-height) !important;
+ margin-left: calc(var(--user-mute-button-height) / 2 + 2px) !important; /* pushes icon to the right */
+ margin-right: 2px !important; /* closes up some space before the text */
+ padding: 0 !important; /* allows icon to expand to full size */
+}
+
+/* Move the site icon to the left a bit and adjust position */
+.tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
+ margin-left: -4px !important; /* pushes icon to the left */
+ margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important; /* keep site icon reasonably positioned */
+}
+
+/* Override the rules for hover/not hover visibility */
+ /* for mute button */
+.tabbrowser-tab:not(:hover) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]),
+ /* for site icon */
+.tabbrowser-tab:hover .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay),
+ /* for site icon with Compact density */
+:root[uidensity="compact"] .tab-icon-stack:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
+ opacity: 1 !important; /* overrides full transparency with full opacity */
+}
+
+/* Color the icon on hover for confirmation or avoidance */
+.tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover {
+ fill: green !important;
+}
+[lwthemetextcolor="bright"] .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted]):hover {
+ fill: lightgreen !important; /* for dark themes */
+}
+
+/* Tweaked Audio playing/Mute button rules for pinned tabs */
+.tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) {
+ width: var(--user-mute-button-height) !important;
+ height: var(--user-mute-button-height) !important;
+ margin-left: 2px !important; /* allow some overlap to reduce expanded width */
+ margin-right: -2px !important; /* reduce empty space on the right */
+ padding: 0 !important; /* allows icon to expand to full size */
+ top: 0 !important; /* align button with site icon */
+}
+.tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
+ margin-left: -6px !important; /* reduce empty space on the left */
+ margin-top: calc((var(--user-mute-button-height) - 16px) / 2) !important; /* keep site icon reasonably positioned */
+}
+.tabbrowser-tab:not(:hover) .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]),
+ /* for site icon */
+.tabbrowser-tab:hover .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay),
+ /* for site icon with Compact density */
+:root[uidensity="compact"] .tab-icon-stack:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]) > :not(.tab-icon-overlay) {
+ opacity: 1 !important; /* overrides full transparency with full opacity */
+}
+.tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover {
+ fill: green !important;
+}
+[lwthemetextcolor="bright"] .tab-icon-overlay:not([crashed]):is([pinned], [sharing]):is([soundplaying], [muted]):hover {
+ fill: lightgreen !important; /* for dark themes */
+}
+
+/* Tweak Options as of 1/12/2022; Generated Mon Jan 17 2022 00:02:20 GMT+0300 (Moscow Standard Time) */