diff --git a/JS/tabThumbnailTooltip.uc.js b/JS/tabThumbnailTooltip.uc.js index 8a9c002d..e427b47c 100644 --- a/JS/tabThumbnailTooltip.uc.js +++ b/JS/tabThumbnailTooltip.uc.js @@ -1,6 +1,6 @@ // ==UserScript== // @name Tab Thumbnail Tooltip -// @version 1.0 +// @version 1.0.1 // @author aminomancer // @homepage https://github.com/aminomancer/uc.css.js // @description Show a large thumbnail image to preview tab content when hovering a tab. @@ -9,7 +9,7 @@ class TabThumbnail { static config = { - "Preview width": 250, // Thumbnail width, in pixels (can override with CSS too) + "Preview width": 320, // Thumbnail width, in pixels (can override with CSS too) "Preview height": 180, // Thumbnail height "Update interval": 30, // How often to refresh the thumbnail, in milliseconds }; @@ -35,12 +35,10 @@ class TabThumbnail { onpopuphiding="ucTabThumbnail.onPopupHiding();" hide-thumbnail="true" style="visibility: collapse;"> - - + + - - - + `; this.registerSheet(); @@ -138,6 +136,7 @@ class TabThumbnail { #tabThumbLabel { text-align: center; margin-inline: 5px; + font-weight: 600; } #tabThumbBox > toolbarseparator { appearance: none; @@ -148,19 +147,20 @@ class TabThumbnail { margin-inline: 0; padding: 0; } - #tabThumbTooltip[hide-thumbnail] #tabCanvasBox, - #tabThumbTooltip[hide-thumbnail] #tabThumbBox > toolbarseparator { - display: none; - } #tabThumbCanvas { - display: block; border-radius: max(3px, var(--thumb-border-radius)); border: 1px solid var(--arrowpanel-border-color); - height: ${config["Preview height"]}px; width: ${config["Preview width"]}px; + height: ${config["Preview height"]}px; + max-width: ${config["Preview width"]}px; + max-height: ${config["Preview height"]}px; background-image: -moz-element(#tabThumbImageCanvas); background-repeat: no-repeat; background-size: cover; + } + #tabThumbTooltip[hide-thumbnail] #tabThumbCanvas, + #tabThumbTooltip[hide-thumbnail] #tabThumbBox > toolbarseparator { + display: none; }`; let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService( Ci.nsIStyleSheetService diff --git a/resources/in-content/ext-nordvpn.css b/resources/in-content/ext-nordvpn.css index f5c03fa1..19b6f290 100644 --- a/resources/in-content/ext-nordvpn.css +++ b/resources/in-content/ext-nordvpn.css @@ -8,20 +8,74 @@ @-moz-document regexp("^moz-extension://.*/.*") { + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] { + --UNIT-BASE-VALUE: 16px; + --UNIT-DOUBLE: 2rem; + --UNIT: 1rem; + --UNIT-HALF: 0.5rem; + --UNIT-QUATER: 0.25rem; + --UNIT-HAIR: 0.125rem; + --COLOR-BASE: var(--in-content-page-color) !important; + --COLOR-BASE-STRONG: var(--ui-text-100) !important; + --COLOR-BASE-INVERTED: var(--in-content-bg-darker) !important; + --COLOR-ERROR: hsl(352.5, 96%, 68.7%) !important; + --COLOR-WARNING: hsl(24.8, 100%, 62.9%) !important; + --COLOR-MUTED: var(--ui-text-50) !important; + --COLOR-SUCCESS: hsl(138.7, 86%, 54.9%) !important; + --COLOR-LOGO: var(--purple-30) !important; + --COLOR-ACTION-BUTTONS: hsl(218.9, 100%, 63.7%); + --FONT-CAPTION: calc(var(--UNIT)*0.75); + --FONT-CAPTION-HEIGHT: --UNIT; + --FONT-PRIMARY: calc(var(--UNIT)*0.875); + --FONT-PRIMARY-HEIGHT: calc(var(--UNIT)*1.25); + --FONT-SUBTITLE: --UNIT; + --FONT-SUBTITLE-HEIGHT: calc(var(--UNIT)*1.5); + --FONT-TITLE: calc(var(--UNIT)*1.5); + --FONT-TITLE-HEIGHT: calc(var(--UNIT)*1.75); + --BACKGROUND-APP: var(--in-content-bg-darker) !important; + --BACKGROUND-CONTENT: var(--in-content-bg-dark) !important; + --BACKGROUND-ELEMENT-HOVER: var(--in-content-button-background-hover) !important; + --Z-BACK: 0; + --Z-NORMAL: 1; + --Z-TOOLTIP: 10; + --Z-FRONT: 100; + } + @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - :root[uc-extension-id="nordvpnproxy@nordvpn.com"] body { - font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] { + --FONT-FAMILY-APP: SF Pro Text !important; } - :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .fwm { - font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important; + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .connect-section-details-header h5 { + font-weight: var(--uc-font-weight-bold, 700) !important; } } - :root[uc-extension-id="nordvpnproxy@nordvpn.com"] body, - :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Container { - background-color: var(--in-content-page-background) !important; - color: var(--in-content-page-color) !important; + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .locations-link { + display: flex !important; + align-items: center !important; + flex-flow: row nowrap !important; + gap: 6px; + } + + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .locations-link-text > svg { + display: none !important; + } + + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .locations-link::before { + content: ""; + width: 18px; + height: 18px; + background: url(chrome://userchrome/content/search-glass.svg) center/contain no-repeat; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + } + + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .tooltip-base { + left: 0; + padding: calc(var(--UNIT)*0.375); + background: var(--BACKGROUND-CONTENT); + border: 1px solid var(--in-content-box-border-color) !important; } :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .Container { @@ -111,9 +165,8 @@ color: var(--in-content-page-color) !important; } - :root[uc-extension-id="nordvpnproxy@nordvpn.com"] - :is(.CountryItem--active, .CountryItem:hover) { - background: var(--in-content-button-background) !important; + :root[uc-extension-id="nordvpnproxy@nordvpn.com"] .country-item:hover { + background-color: var(--in-content-button-background-hover) !important; } :root[uc-extension-id="nordvpnproxy@nordvpn.com"] hr { diff --git a/resources/in-content/picture-in-picture.css b/resources/in-content/picture-in-picture.css index c75e9f29..050f5638 100644 --- a/resources/in-content/picture-in-picture.css +++ b/resources/in-content/picture-in-picture.css @@ -6,11 +6,17 @@ /* styles the picture-in-picture overlay */ -#pictureInPictureToggle.pip-wrapper { +.pip-wrapper { top: calc(50% - 1px) !important; + right: 0 !important; + margin-inline: 0 !important; } -#pictureInPictureToggle .pip-expanded { +.pip-wrapper[position="left"] { + left: 0 !important; +} + +.pip-wrapper .pip-expanded { display: flex !important; opacity: 1 !important; scale: 1 1 !important; @@ -20,35 +26,51 @@ cursor: pointer !important; background-color: var(--picture-in-picture-toggle-bgcolor) !important; max-height: 26px !important; - border-top-left-radius: 2px !important; - border-bottom-left-radius: 2px !important; - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; + border-radius: 2px 0 0 2px !important; pointer-events: auto !important; } -#pictureInPictureToggle .pip-icon { +.pip-wrapper[position="left"] .pip-expanded { + border-radius: 0 2px 2px 0 !important; +} + +.pip-wrapper .pip-icon { background-image: url(chrome://userchrome/content/tab-picture-in-picture.svg) !important; background-position: 0 1.6px !important; background-repeat: no-repeat; - margin-left: 0 !important; - margin-right: 5.5px !important; + margin-inline: 0 5.5px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; background-size: contain !important; } -#pictureInPictureToggle .pip-icon-label { +.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon { + position: relative !important; + top: 0 !important; + left: 0 !important; + display: inline-block !important; + order: 1 !important; + margin-inline: 5.5px 0 !important; +} + +.pip-wrapper .pip-icon-label { padding-block: 4px !important; - padding-inline-start: 5.5px; + padding-inline: 5.5px 0; font-size: 13px !important; margin-block: 1px 0; font-weight: 500 !important; } +.pip-wrapper[position="left"] .pip-icon-label { + padding-inline: 0 5.5px; + display: flex !important; + flex-direction: row !important; + align-content: center !important; +} + @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { - #pictureInPictureToggle .pip-icon-label { + .pip-wrapper .pip-icon-label { font-family: SF Pro, SF Arabic, Segoe UI, sans-serif !important; font-kerning: normal !important; } @@ -59,44 +81,60 @@ } } -#pictureInPictureToggle .pip-label { +.pip-wrapper .pip-label { margin-block: 0 !important; - margin-right: 5px !important; + margin-inline: 0 5px !important; min-height: 18px !important; max-height: 18px !important; } -#pictureInPictureToggle .pip-explainer, -#pictureInPictureToggle .pip-small, -#pictureInPictureToggle > .pip-icon { +.pip-wrapper[position="left"] .pip-label { + margin-inline: 5px 0 !important; +} + +.pip-wrapper .pip-explainer, +.pip-wrapper .pip-small, +.pip-wrapper > .pip-icon { display: none !important; } -#pictureInPictureToggle { +.pip-wrapper { pointer-events: none !important; } -.controlsOverlay.hovering #pictureInPictureToggle { +.controlsOverlay.hovering .pip-wrapper { opacity: 1 !important; } -#pictureInPictureToggle .pip-expanded, -.controlsOverlay[hidetoggle="true"].hovering > #pictureInPictureToggle > .pip-expanded { +.pip-wrapper .pip-expanded, +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper > .pip-expanded { opacity: 0 !important; transform-style: flat !important; backface-visibility: hidden !important; transition: opacity 250ms, translate 190ms !important; - translate: calc(48px) !important; + translate: 8px !important; +} + +.pip-wrapper[position="left"] .pip-expanded, +.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper[position="left"] > .pip-expanded { + translate: calc(-100% - 8px) !important; } -.controlsOverlay.hovering #pictureInPictureToggle .pip-expanded { +.controlsOverlay.hovering .pip-wrapper .pip-expanded { opacity: 1 !important; - translate: 0 !important; - translate: calc(19px) !important; + translate: -29px !important; } -.controlsOverlay.hovering #pictureInPictureToggle .pip-expanded:hover { +.controlsOverlay.hovering .pip-wrapper[position="left"] .pip-expanded { + translate: calc(-100% + 29px) !important; +} + +.controlsOverlay.hovering .pip-wrapper .pip-expanded:hover { opacity: 1 !important; translate: 0 !important; - translate: calc(-100% + 48px) !important; + translate: -100% !important; +} + +.controlsOverlay.hovering .pip-wrapper[position="left"] .pip-expanded:hover { + translate: 0 !important; } diff --git a/resources/in-content/root.css b/resources/in-content/root.css index f7a1c142..6f25a67a 100644 --- a/resources/in-content/root.css +++ b/resources/in-content/root.css @@ -78,3 +78,7 @@ .controlsContainer { --control-focus-outline: 2px solid var(--purple-30) !important; } + +#texttracks { + font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; +} diff --git a/resources/in-content/system.css b/resources/in-content/system.css index 89393d53..0c8e73b6 100644 --- a/resources/in-content/system.css +++ b/resources/in-content/system.css @@ -742,8 +742,7 @@ @supports -moz-bool-pref("userChrome.css.mac-ui-fonts") { :root[uc-extension-id="screenshots@mozilla.org"] .pixel-dimensions { font-weight: var(--uc-font-weight-bold) !important; - font-family: -apple-system, BlinkMacSystemFont, SF Pro, "segoe ui", "helvetica neue", - helvetica, ubuntu, roboto, noto, arial, sans-serif !important; + font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important; font-size: normal !important; } } diff --git a/resources/material/game-controller-blocked.svg b/resources/material/game-controller-blocked.svg new file mode 100644 index 00000000..ba2e315d --- /dev/null +++ b/resources/material/game-controller-blocked.svg @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/resources/material/game-controller.svg b/resources/material/game-controller.svg new file mode 100644 index 00000000..d8a359a2 --- /dev/null +++ b/resources/material/game-controller.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/resources/material/hide-controls.svg b/resources/material/hide-controls.svg index 58e78476..44879ad0 100644 --- a/resources/material/hide-controls.svg +++ b/resources/material/hide-controls.svg @@ -1,12 +1,13 @@ - + \ No newline at end of file diff --git a/resources/material/show-controls.svg b/resources/material/show-controls.svg index e11603fb..6b9fd768 100644 --- a/resources/material/show-controls.svg +++ b/resources/material/show-controls.svg @@ -1,8 +1,11 @@ - + \ No newline at end of file diff --git a/resources/pictureinpicture-closed.svg b/resources/pictureinpicture-closed.svg new file mode 100644 index 00000000..3aa14114 --- /dev/null +++ b/resources/pictureinpicture-closed.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/resources/pictureinpicture.svg b/resources/pictureinpicture.svg index 014231af..a184fe28 100644 --- a/resources/pictureinpicture.svg +++ b/resources/pictureinpicture.svg @@ -2,5 +2,6 @@ - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - + + \ No newline at end of file diff --git a/uc-panels.css b/uc-panels.css index 3ce89b95..2f95c241 100644 --- a/uc-panels.css +++ b/uc-panels.css @@ -869,7 +869,7 @@ popupnotificationcontent label[control]:not([hidden]) + menulist { margin-bottom: calc(0px - var(--arrowpanel-menuitem-padding-block)) !important; } -#identity-popup-securityView .identity-popup-security-connection :where(description, label) { +.identity-popup-security-connection :where(description, label) { margin-inline-start: calc(16px + var(--arrowpanel-subviewbutton-iconic-gap, 8px)) !important; } diff --git a/uc-popups.css b/uc-popups.css index dfebd3bb..b96d984f 100644 --- a/uc-popups.css +++ b/uc-popups.css @@ -478,9 +478,11 @@ panel[type="autocomplete-richlistbox"] /* backdrop-filter: blur(8px) !important; background-color: var(--btn-bg-color) !important; background-image: var(--acrylic-texture), var(--pip-icon) !important; */ + background-image: var(--pip-icon) !important; background-color: var(--in-content-button-highlight-dark) !important; fill: currentColor !important; - -moz-context-properties: fill !important; + stroke: currentColor !important; + -moz-context-properties: fill, stroke !important; color: var(--player-control-icon-fill) !important; border-radius: 3px !important; } @@ -495,28 +497,30 @@ panel[type="autocomplete-richlistbox"] } #close { - background-size: 80% !important; - --pip-icon: url(chrome://global/skin/icons/close.svg); + background-size: 22px !important; + --pip-icon: url(chrome://userchrome/content/close.svg); } #controls.playing #playpause { - --pip-icon: url(chrome://global/skin/media/pause-fill.svg); + background-size: 19px !important; + --pip-icon: url(chrome://userchrome/content/material/pause.svg); } #controls:not(.playing) #playpause { - --pip-icon: url(chrome://global/skin/media/play-fill.svg); + background-size: 15px !important; + --pip-icon: url(chrome://userchrome/content/glyph-play-12.svg); } #controls.muted #audio { - --pip-icon: url(chrome://global/skin/media/audio-muted.svg); + --pip-icon: url(chrome://userchrome/content/audioMutedButton.svg); } #controls:not(.muted) #audio { - --pip-icon: url(chrome://global/skin/media/audio.svg); + --pip-icon: url(chrome://userchrome/content/audioUnmutedButton.svg); } #unpip { - --pip-icon: url(chrome://global/skin/media/picture-in-picture-closed.svg); + --pip-icon: url(chrome://userchrome/content/pictureinpicture-closed.svg); } }