Skip to content

Commit

Permalink
(JS) update tabThumbnailTooltip.uc.js.
Browse files Browse the repository at this point in the history 
(CSS) fix the identity popup label position.
update picture-in-picture toggle styles:
support the position pref = left.
update nordVPN popup styles.
change "show controls" context menu icon.
change the "leave picture-in-picture" icon.
add a new icon for game controller.
  • Loading branch information
@aminomancer
aminomancer committed Feb 12, 2022
1 parent 73716d2 commit 4e5d50f
Show file tree
Hide file tree
Showing 13 changed files with 208 additions and 78 deletions.
26 changes: 13 additions & 13 deletions JS/tabThumbnailTooltip.uc.js
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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
};
Expand All @@ -35,12 +35,10 @@ class TabThumbnail {
onpopuphiding="ucTabThumbnail.onPopupHiding();"
hide-thumbnail="true"
style="visibility: collapse;">
<vbox id ="tabThumbBox" flex="true">
<description id="tabThumbLabel" class="tooltip-label" flex="true"/>
<vbox id ="tabThumbBox">
<description id="tabThumbLabel" class="tooltip-label"/>
<toolbarseparator />
<hbox id="tabCanvasBox" flex="true">
<html:div id="tabThumbCanvas"></html:div>
</hbox>
<html:div id="tabThumbCanvas"></html:div>
</vbox>
</tooltip>`;
this.registerSheet();
Expand Down Expand Up @@ -138,6 +136,7 @@ class TabThumbnail {
#tabThumbLabel {
text-align: center;
margin-inline: 5px;
font-weight: 600;
}
#tabThumbBox > toolbarseparator {
appearance: none;
Expand All @@ -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
Expand Down
75 changes: 64 additions & 11 deletions resources/in-content/ext-nordvpn.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
92 changes: 65 additions & 27 deletions resources/in-content/picture-in-picture.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
4 changes: 4 additions & 0 deletions resources/in-content/root.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 1 addition & 2 deletions resources/in-content/system.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
11 changes: 11 additions & 0 deletions resources/material/game-controller-blocked.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions resources/material/game-controller.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 10 additions & 9 deletions resources/material/hide-controls.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4e5d50f

Please sign in to comment.