mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 790112: fix social toolbar button styling so that separate "sub-buttons" are visually distinct, patch by :mixedpuppy, :jaws and :markh, r=felipe
This commit is contained in:
Jared Wein
parent
092da57fd8
commit
07892b9c3a
@ -531,33 +531,21 @@ let SocialShareButton = {
|
||||
var SocialToolbar = {
|
||||
// Called once, after window load, when the Social.provider object is initialized
|
||||
init: function SocialToolbar_init() {
|
||||
document.getElementById("social-provider-image").setAttribute("image", Social.provider.iconURL);
|
||||
|
||||
let statusAreaPopup = document.getElementById("social-statusarea-popup");
|
||||
statusAreaPopup.addEventListener("popupshown", function(e) {
|
||||
this.button.setAttribute("open", "true");
|
||||
}.bind(this));
|
||||
statusAreaPopup.addEventListener("popuphidden", function(e) {
|
||||
this.button.removeAttribute("open");
|
||||
}.bind(this));
|
||||
|
||||
document.getElementById("social-provider-button").setAttribute("image", Social.provider.iconURL);
|
||||
this.updateButton();
|
||||
this.updateProfile();
|
||||
},
|
||||
|
||||
get button() {
|
||||
return document.getElementById("social-toolbar-button");
|
||||
},
|
||||
|
||||
updateButtonHiddenState: function SocialToolbar_updateButtonHiddenState() {
|
||||
this.button.hidden = !Social.uiVisible;
|
||||
let tbi = document.getElementById("social-toolbar-item");
|
||||
tbi.hidden = !Social.uiVisible;
|
||||
if (!SocialUI.haveLoggedInUser()) {
|
||||
["social-notification-box",
|
||||
"social-status-iconbox"].forEach(function removeChildren(parentId) {
|
||||
let parent = document.getElementById(parentId);
|
||||
while(parent.hasChildNodes())
|
||||
parent.removeChild(parent.firstChild);
|
||||
});
|
||||
let parent = document.getElementById("social-notification-box");
|
||||
while (parent.hasChildNodes())
|
||||
parent.removeChild(parent.firstChild);
|
||||
|
||||
while (tbi.lastChild != tbi.firstChild)
|
||||
tbi.removeChild(tbi.lastChild);
|
||||
}
|
||||
},
|
||||
|
||||
@ -585,7 +573,7 @@ var SocialToolbar = {
|
||||
this.updateButtonHiddenState();
|
||||
let provider = Social.provider;
|
||||
let iconNames = Object.keys(provider.ambientNotificationIcons);
|
||||
let iconBox = document.getElementById("social-status-iconbox");
|
||||
let iconBox = document.getElementById("social-toolbar-item");
|
||||
let notifBox = document.getElementById("social-notification-box");
|
||||
let panel = document.getElementById("social-notification-panel");
|
||||
panel.hidden = false;
|
||||
@ -613,44 +601,57 @@ var SocialToolbar = {
|
||||
notificationFrame.setAttribute("src", icon.contentPanel);
|
||||
|
||||
let iconId = "social-notification-icon-" + icon.name;
|
||||
let iconContainer = document.getElementById(iconId);
|
||||
let iconImage, iconCounter;
|
||||
if (iconContainer) {
|
||||
iconImage = iconContainer.getElementsByClassName("social-notification-icon-image")[0];
|
||||
iconCounter = iconContainer.getElementsByClassName("social-notification-icon-counter")[0];
|
||||
let imageId = iconId + "-image";
|
||||
let labelId = iconId + "-label";
|
||||
let stackId = iconId + "-stack";
|
||||
let stack = document.getElementById(stackId);
|
||||
let image, label;
|
||||
if (stack) {
|
||||
image = document.getElementById(imageId);
|
||||
label = document.getElementById(labelId);
|
||||
} else {
|
||||
iconContainer = document.createElement("box");
|
||||
iconContainer.setAttribute("id", iconId);
|
||||
iconContainer.classList.add("social-notification-icon-container");
|
||||
iconContainer.addEventListener("click", function (e) { SocialToolbar.showAmbientPopup(iconContainer); }, false);
|
||||
|
||||
iconImage = document.createElement("image");
|
||||
iconImage.classList.add("social-notification-icon-image");
|
||||
iconImage = iconContainer.appendChild(iconImage);
|
||||
|
||||
iconCounter = document.createElement("box");
|
||||
iconCounter.classList.add("social-notification-icon-counter");
|
||||
iconCounter.appendChild(document.createTextNode(""));
|
||||
iconCounter = iconContainer.appendChild(iconCounter);
|
||||
|
||||
iconContainers.appendChild(iconContainer);
|
||||
let box = document.createElement("box");
|
||||
box.classList.add("toolbarbutton-1");
|
||||
box.setAttribute("id", iconId);
|
||||
box.addEventListener("mousedown", function (e) { SocialToolbar.showAmbientPopup(box); }, false);
|
||||
box.setAttribute("notificationFrameId", notificationFrameId);
|
||||
stack = document.createElement("stack");
|
||||
stack.setAttribute("id", stackId);
|
||||
stack.classList.add("social-notification-icon-stack");
|
||||
stack.classList.add("toolbarbutton-icon");
|
||||
image = document.createElement("image");
|
||||
image.setAttribute("id", imageId);
|
||||
image = stack.appendChild(image);
|
||||
label = document.createElement("label");
|
||||
label.setAttribute("id", labelId);
|
||||
label.classList.add("social-notification-icon-label");
|
||||
let hbox = document.createElement("hbox");
|
||||
hbox.classList.add("social-notification-icon-hbox");
|
||||
hbox.setAttribute("align", "start");
|
||||
hbox.setAttribute("pack", "end");
|
||||
label = hbox.appendChild(label);
|
||||
stack.appendChild(hbox);
|
||||
box.appendChild(stack);
|
||||
iconContainers.appendChild(box);
|
||||
}
|
||||
if (iconImage.getAttribute("src") != icon.iconURL)
|
||||
iconImage.setAttribute("src", icon.iconURL);
|
||||
iconImage.setAttribute("notificationFrameId", notificationFrameId);
|
||||
|
||||
iconCounter.collapsed = !icon.counter;
|
||||
iconCounter.firstChild.textContent = icon.counter || "";
|
||||
let labelValue = icon.counter || "";
|
||||
// Only update the value attribute if it has changed to reduce layout changes.
|
||||
if (!label.hasAttribute("value") || label.getAttribute("value") != labelValue)
|
||||
label.setAttribute("value", labelValue);
|
||||
|
||||
if (image.getAttribute("src") != icon.iconURL)
|
||||
image.setAttribute("src", icon.iconURL);
|
||||
}
|
||||
notifBox.appendChild(notificationFrames);
|
||||
iconBox.appendChild(iconContainers);
|
||||
},
|
||||
|
||||
showAmbientPopup: function SocialToolbar_showAmbientPopup(iconContainer) {
|
||||
let iconImage = iconContainer.firstChild;
|
||||
showAmbientPopup: function SocialToolbar_showAmbientPopup(aToolbarButtonBox) {
|
||||
let panel = document.getElementById("social-notification-panel");
|
||||
let notifBox = document.getElementById("social-notification-box");
|
||||
let notificationFrame = document.getElementById(iconImage.getAttribute("notificationFrameId"));
|
||||
let notificationFrameId = aToolbarButtonBox.getAttribute("notificationFrameId");
|
||||
let notificationFrame = document.getElementById(notificationFrameId);
|
||||
|
||||
// Clear dimensions on all browsers so the panel size will
|
||||
// only use the selected browser.
|
||||
@ -668,14 +669,14 @@ var SocialToolbar = {
|
||||
|
||||
panel.addEventListener("popuphidden", function onpopuphiding() {
|
||||
panel.removeEventListener("popuphidden", onpopuphiding);
|
||||
SocialToolbar.button.removeAttribute("open");
|
||||
aToolbarButtonBox.removeAttribute("open");
|
||||
notificationFrame.docShell.isActive = false;
|
||||
dispatchPanelEvent("socialFrameHide");
|
||||
});
|
||||
|
||||
panel.addEventListener("popupshown", function onpopupshown() {
|
||||
panel.removeEventListener("popupshown", onpopupshown);
|
||||
SocialToolbar.button.setAttribute("open", "true");
|
||||
aToolbarButtonBox.setAttribute("open", "true");
|
||||
notificationFrame.docShell.isActive = true;
|
||||
notificationFrame.docShell.isAppTab = true;
|
||||
if (notificationFrame.contentDocument.readyState == "complete") {
|
||||
@ -693,7 +694,9 @@ var SocialToolbar = {
|
||||
}
|
||||
});
|
||||
|
||||
panel.openPopup(iconImage, "bottomcenter topleft", 0, 0, false, false);
|
||||
let imageId = aToolbarButtonBox.getAttribute("id") + "-image";
|
||||
let toolbarButtonImage = document.getElementById(imageId);
|
||||
panel.openPopup(toolbarButtonImage, "bottomcenter topleft", 0, 0, false, false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -660,41 +660,32 @@
|
||||
onclick="BrowserGoHome(event);"
|
||||
aboutHomeOverrideTooltip="&abouthome.pageTitle;"/>
|
||||
|
||||
<toolbaritem id="social-toolbar-button"
|
||||
class="toolbarbutton-1 chromeclass-toolbar-additional"
|
||||
<toolbaritem id="social-toolbar-item"
|
||||
class="chromeclass-toolbar-additional"
|
||||
removable="false"
|
||||
pack="center"
|
||||
title="&socialToolbar.title;"
|
||||
hidden="true">
|
||||
<hbox id="social-toolbar-button-box" class="social-statusarea-container">
|
||||
<button id="social-provider-image" type="menu">
|
||||
<menupopup id="social-statusarea-popup">
|
||||
<hbox id="social-statusarea-user" pack="left" align="center">
|
||||
<image id="social-statusarea-user-portrait"/>
|
||||
<vbox>
|
||||
<label id="social-statusarea-notloggedin"
|
||||
value="&social.notLoggedIn.label;"/>
|
||||
<button id="social-statusarea-username"
|
||||
oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<menuitem id="social-toggle-sidebar-menuitem"
|
||||
type="checkbox"
|
||||
autocheck="false"
|
||||
command="Social:ToggleSidebar"
|
||||
label="&social.toggleSidebar.label;"
|
||||
accesskey="&social.toggleSidebar.accesskey;"/>
|
||||
<menuitem id="social-toggle-notifications-menuitem"
|
||||
type="checkbox"
|
||||
autocheck="false"
|
||||
command="Social:ToggleNotifications"
|
||||
label="&social.toggleNotifications.label;"
|
||||
accesskey="&social.toggleNotifications.accesskey;"/>
|
||||
</menupopup>
|
||||
</button>
|
||||
<hbox id="social-status-iconbox" flex="1">
|
||||
</hbox>
|
||||
</hbox>
|
||||
<toolbarbutton id="social-provider-button"
|
||||
class="toolbarbutton-1"
|
||||
type="menu">
|
||||
<menupopup id="social-statusarea-popup">
|
||||
<hbox id="social-statusarea-user" pack="left" align="center">
|
||||
<image id="social-statusarea-user-portrait"/>
|
||||
<vbox>
|
||||
<label id="social-statusarea-notloggedin"
|
||||
value="&social.notLoggedIn.label;"/>
|
||||
<button id="social-statusarea-username"
|
||||
oncommand="SocialUI.showProfile(); document.getElementById('social-statusarea-popup').hidePopup();"/>
|
||||
</vbox>
|
||||
</hbox>
|
||||
<menuitem id="social-toggle-sidebar-menuitem"
|
||||
type="checkbox"
|
||||
autocheck="false"
|
||||
command="Social:ToggleSidebar"
|
||||
label="&social.toggleSidebar.label;"
|
||||
accesskey="&social.toggleSidebar.accesskey;"/>
|
||||
</menupopup>
|
||||
</toolbarbutton>
|
||||
</toolbaritem>
|
||||
|
||||
<toolbaritem id="bookmarks-menu-button-container"
|
||||
|
||||
@ -28,12 +28,16 @@ var tests = {
|
||||
}
|
||||
|
||||
function triggerIconPanel() {
|
||||
let statusIcons = document.getElementById("social-status-iconbox");
|
||||
waitForCondition(function() statusIcons.firstChild && !statusIcons.firstChild.hidden,
|
||||
function() {
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
info("status icon is " + statusIcon);
|
||||
waitForCondition(function() {
|
||||
statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
info("status icon is " + statusIcon);
|
||||
return !!statusIcon;
|
||||
}, function() {
|
||||
// Click the button to trigger its contentPanel
|
||||
let panel = document.getElementById("social-notification-panel");
|
||||
EventUtils.synthesizeMouseAtCenter(statusIcons.firstChild, {});
|
||||
EventUtils.synthesizeMouseAtCenter(statusIcon, {});
|
||||
}, "Status icon didn't become non-hidden");
|
||||
}
|
||||
|
||||
|
||||
@ -42,26 +42,28 @@ var tests = {
|
||||
};
|
||||
Social.provider.setAmbientNotification(ambience);
|
||||
|
||||
let statusIcons = document.getElementById("social-status-iconbox");
|
||||
ok(!statusIcons.firstChild.collapsed, "status icon is visible");
|
||||
ok(!statusIcons.firstChild.lastChild.collapsed, "status value is visible");
|
||||
is(statusIcons.firstChild.lastChild.textContent, "42", "status value is correct");
|
||||
let statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
waitForCondition(function() {
|
||||
statusIcon = document.querySelector("#social-toolbar-item > box");
|
||||
return !!statusIcon;
|
||||
}, function () {
|
||||
let statusIconLabel = statusIcon.querySelector("label");
|
||||
is(statusIconLabel.value, "42", "status value is correct");
|
||||
|
||||
ambience.counter = 0;
|
||||
Social.provider.setAmbientNotification(ambience);
|
||||
ok(statusIcons.firstChild.lastChild.collapsed, "status value is not visible");
|
||||
is(statusIcons.firstChild.lastChild.textContent, "", "status value is correct");
|
||||
next();
|
||||
ambience.counter = 0;
|
||||
Social.provider.setAmbientNotification(ambience);
|
||||
is(statusIconLabel.value, "", "status value is correct");
|
||||
next();
|
||||
}, "statusIcon was never found");
|
||||
},
|
||||
testProfileUnset: function(next) {
|
||||
Social.provider.updateUserProfile({});
|
||||
// check dom values
|
||||
let userButton = document.getElementById("social-statusarea-username");
|
||||
ok(userButton.hidden, "username is not visible");
|
||||
let ambience = document.getElementById("social-status-iconbox").firstChild;
|
||||
while (ambience) {
|
||||
ok(ambience.collapsed, "ambient icon (" + ambience.id + ") is collapsed");
|
||||
ambience = ambience.nextSibling;
|
||||
let ambientIcons = document.querySelectorAll("#social-toolbar-item > box");
|
||||
for (let ambientIcon of ambientIcons) {
|
||||
ok(ambientIcon.collapsed, "ambient icon (" + ambientIcon.id + ") is collapsed");
|
||||
}
|
||||
|
||||
next();
|
||||
|
||||
@ -2609,53 +2609,46 @@ html|*#gcli-output-frame {
|
||||
-moz-margin-end: 2px;
|
||||
}
|
||||
|
||||
#social-toolbar-button {
|
||||
#social-toolbar-item {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
#social-toolbar-item > .toolbarbutton-1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-moz-appearance: toolbarbutton;
|
||||
}
|
||||
|
||||
/* favicon for the service */
|
||||
#social-provider-image {
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
padding: 2px 5px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
list-style-image: url("chrome://browser/skin/social/social.png");
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box > .box-inherit > .button-icon {
|
||||
max-height: 16px;
|
||||
max-width: 16px;
|
||||
.social-status-button {
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
#social-provider-button > image {
|
||||
margin: 5px 3px;
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box > .button-menu-dropmarker {
|
||||
#social-provider-button > .toolbarbutton-menu-dropmarker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hbox that hold notification icons */
|
||||
#social-status-iconbox {
|
||||
margin: 0;
|
||||
.social-notification-icon-stack {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* hbox that surrounds an image and its counter */
|
||||
.social-notification-icon-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
.social-notification-icon-stack > image {
|
||||
margin: 5px 3px;
|
||||
max-height: 16px;
|
||||
}
|
||||
|
||||
/* notification counter box */
|
||||
.social-notification-icon-counter {
|
||||
.social-notification-icon-hbox {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.social-notification-icon-label {
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
|
||||
@ -2664,21 +2657,11 @@ html|*#gcli-output-frame {
|
||||
color: white;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -4px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* notification image */
|
||||
.social-notification-icon-image {
|
||||
padding: 2px;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
max-width: 32px;
|
||||
max-height: 20px;
|
||||
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* social toolbar provider menu */
|
||||
|
||||
@ -3324,48 +3324,59 @@ html|*#gcli-output-frame {
|
||||
/* === social toolbar button === */
|
||||
|
||||
/* button icon for the service */
|
||||
#social-provider-image {
|
||||
-moz-appearance: none;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
min-width: 0;
|
||||
max-height: 20px;
|
||||
list-style-image: url("chrome://browser/skin/social/social.png");
|
||||
#social-toolbar-item {
|
||||
-moz-box-orient: horizontal;
|
||||
}
|
||||
|
||||
/* hbox that surrounds an image and its counter */
|
||||
.social-notification-icon-container {
|
||||
cursor: pointer;
|
||||
padding: 0px;
|
||||
#social-toolbar-item > .toolbarbutton-1 {
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* notification counter box */
|
||||
.social-notification-icon-counter {
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
|
||||
padding-right: 1px;
|
||||
padding-left: 1px;
|
||||
color: white;
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.social-status-button {
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
#social-provider-button > .toolbarbutton-menu-dropmarker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social-notification-icon-stack {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.social-notification-icon-stack > image {
|
||||
max-height: 16px;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
padding: 0;
|
||||
}
|
||||
.social-notification-icon-label {
|
||||
text-align: end;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -4px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
padding: 0 1px;
|
||||
color: white;
|
||||
margin: 0;
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
|
||||
-moz-margin-end: -4px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
/* notification image */
|
||||
.social-notification-icon-image {
|
||||
padding: 2px;
|
||||
margin: 0px;
|
||||
min-width: 20px;
|
||||
max-width: 32px;
|
||||
max-height: 20px;
|
||||
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (-moz-mac-lion-theme) {
|
||||
.social-notification-icon-stack > image:-moz-window-inactive {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
/* === end of social toolbar button === */
|
||||
|
||||
@ -670,7 +670,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
-moz-box-pack: center;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) {
|
||||
@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
@ -708,7 +708,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button) > .toolbarbutton-icon,
|
||||
@navbarLargeIcons@ .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button) > .toolbarbutton-icon,
|
||||
@navbarLargeIcons@ .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
|
||||
-moz-padding-end: 17px;
|
||||
}
|
||||
@ -725,13 +725,18 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
|
||||
padding: 8px 3px 7px;
|
||||
}
|
||||
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
|
||||
@navbarLargeIcons@ .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:not(:first-child)::before {
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
width: 1px;
|
||||
height: 18px;
|
||||
-moz-margin-end: -1px;
|
||||
background: hsla(210,54%,20%,.2) padding-box;
|
||||
background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
|
||||
background-clip: padding-box;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1px 18px;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
|
||||
}
|
||||
|
||||
@ -3286,88 +3291,44 @@ html|*#gcli-output-frame {
|
||||
-moz-margin-end: 5px;
|
||||
}
|
||||
|
||||
/* Social toolbar item */
|
||||
|
||||
/* social toolbar button */
|
||||
.social-statusarea-container {
|
||||
-moz-appearance: none;
|
||||
margin: 2px; /* make sure we have the correct platform spacing*/
|
||||
padding: 0 1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.social-statusarea-container:hover {
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
|
||||
border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
|
||||
box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
|
||||
0 1px hsla(210,54%,20%,.03),
|
||||
0 0 2px hsla(210,54%,20%,.1);
|
||||
}
|
||||
|
||||
#social-toolbar-button[open="true"] > .social-statusarea-container {
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
|
||||
background-color: hsla(210,54%,20%,.15);
|
||||
border-color: hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) hsla(210,54%,20%,.4);
|
||||
box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
|
||||
0 0 1px hsla(210,54%,20%,.2) inset;
|
||||
}
|
||||
|
||||
/* favicon for the service */
|
||||
#social-provider-image {
|
||||
-moz-appearance: none;
|
||||
border: none;
|
||||
min-width: 20px;
|
||||
min-height: 16px;
|
||||
padding: 2px 5px;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
list-style-image: url("chrome://browser/skin/social/social.png");
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box > .box-inherit > .button-icon {
|
||||
max-height: 16px;
|
||||
max-width: 16px;
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#social-provider-image > .button-box > .button-menu-dropmarker {
|
||||
#social-provider-button > .toolbarbutton-menu-dropmarker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hbox that hold notification icons */
|
||||
#social-status-iconbox {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1 {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/* hbox that surrounds an image and its counter */
|
||||
.social-notification-icon-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:first-child {
|
||||
-moz-padding-start: 5px;
|
||||
}
|
||||
|
||||
/* notification counter box */
|
||||
.social-notification-icon-counter {
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
box-shadow: 0px 1px 0px rgba(0,39,121,0.77);
|
||||
padding-right: 1px;
|
||||
padding-left: 1px;
|
||||
color: white;
|
||||
@navbarLargeIcons@ > #social-toolbar-item > .toolbarbutton-1:last-child {
|
||||
-moz-padding-end: 5px;
|
||||
}
|
||||
|
||||
.social-notification-icon-hbox {
|
||||
pointer-events: none;
|
||||
margin-top: -5px;
|
||||
-moz-margin-end: -12px;
|
||||
}
|
||||
|
||||
.social-notification-icon-label {
|
||||
text-align: end;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -4px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
padding: 0 1px;
|
||||
color: white;
|
||||
background-color: rgb(240,61,37);
|
||||
border: 1px solid rgb(216,55,34);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 0 rgba(0,39,121,0.77);
|
||||
}
|
||||
|
||||
.social-notification-icon-label[value=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* notification image */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user