#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
border: none;
border-radius: 0px;
+ transition: opacity 0.15s ease;
+}
+
+#navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
+ opacity: 0;
}
.urlbar-history-dropmarker:hover {
.tab-icon-overlay {
width: 16px;
height: 16px;
- /* margin-top: -12px; */
- -moz-margin-start: -16px;
+ margin-top: -8px;
+ -moz-margin-start: -15px;
position: relative;
}
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]) {
- border-radius: 8px;
+ border-radius: 10px;
}
.tab-icon-overlay[soundplaying]:hover,
/* End selected tab */
+/* User Context UI - change tab decoration depending on userContextId.
+ Defaults to gray for unknown usercontextids. */
+.tabbrowser-tab[usercontextid] {
+ background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
+ background-size: auto 2px;
+ background-repeat: no-repeat;
+}
+
+/* Personal User Context */
+.tabbrowser-tab[usercontextid="1"] {
+ background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
+}
+/* Work User Context */
+.tabbrowser-tab[usercontextid="2"] {
+ background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
+}
+/* Banking User Context */
+.tabbrowser-tab[usercontextid="3"] {
+ background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
+}
+/* Shopping User Context */
+.tabbrowser-tab[usercontextid="4"] {
+ background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
+}
+
/* Tab pointer-events */
/*
.tabbrowser-tab {
background-color: #402800;
}
+.alltabs-endimage[muted] {
+ list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
+}
+
+.alltabs-endimage[soundplaying] {
+ list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
+}
+
toolbarbutton.chevron {
list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
}
list-style-image: url("chrome://browser/skin/Geolocation-64.png");
}
-.popup-notification-icon[popupid="push"] {
- list-style-image: url(chrome://browser/skin/Push-64.png);
-}
-
.popup-notification-icon[popupid="xpinstall-disabled"],
.popup-notification-icon[popupid="addon-install-blocked"],
.popup-notification-icon[popupid="addon-install-origin-blocked"] {
}
.popup-notification-icon[popupid="web-notifications"] {
- list-style-image: url("chrome://browser/skin/notification-64.png");
+ list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
}
.popup-notification-icon[popupid="indexedDB-permissions-prompt"],
list-style-image: url("chrome://browser/skin/Geolocation-16.png");
}
-#push-notification-icon {
- list-style-image: url(chrome://browser/skin/Push-16.png);
-}
-
#addons-notification-icon {
list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
}
.web-notifications-notification-icon,
#web-notifications-notification-icon {
- list-style-image: url("chrome://browser/skin/notification-16.png");
+ list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
+ -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.web-notifications-notification-icon:hover,
+#web-notifications-notification-icon:hover {
+ -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+.web-notifications-notification-icon:hover:active,
+#web-notifications-notification-icon:hover:active {
+ -moz-image-region: rect(0, 48px, 16px, 32px);
}
#pointerLock-notification-icon {
margin-top: 1em;
}
-#sync-error-panel-title,
#sync-start-panel-title {
font-size: 120%;
font-weight: bold;
margin-bottom: 5px;
}
-#sync-start-panel-subtitle,
-#sync-error-panel-subtitle {
- margin: 0;
+#sync-start-panel-subtitle {
+ margin-bottom: 0;
}
/* Status panel */
/* === BEGIN fullscreen/warning.inc.css === */
-#fullscreen-warning {
+html|*#fullscreen-warning {
align-items: center;
background: rgba(0, 0, 0, 0.9);
border: 2px solid #A09090;
font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
}
-#fullscreen-warning::before {
+html|*#fullscreen-warning::before {
margin: 0;
width: 24px; height: 24px;
}
-#fullscreen-warning.verifiedIdentity::before,
-#fullscreen-warning.verifiedDomain::before {
+html|*#fullscreen-warning.verifiedIdentity::before,
+html|*#fullscreen-warning.verifiedDomain::before {
content: url("chrome://browser/skin/fullscreen/secure.svg");
}
-#fullscreen-warning.unknownIdentity::before {
+html|*#fullscreen-warning.unknownIdentity::before {
content: url("chrome://browser/skin/fullscreen/insecure.svg");
}
-#fullscreen-domain-text,
-#fullscreen-generic-text {
+html|*#fullscreen-domain-text,
+html|*#fullscreen-generic-text {
font-size: 21px;
font-weight: lighter;
color: #A09090;
margin: 0 16px;
}
-#fullscreen-domain {
+html|*#fullscreen-domain {
font-weight: bold;
margin: 0;
}
-#fullscreen-exit-button {
- padding: 0 30px;
+html|*#fullscreen-exit-button {
+ padding: 5px 30px;
font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
font-size: 14px;
font-weight: lighter;
margin: 0;
- height: 28px;
box-sizing: content-box;
border-radius: 300px;
background: none;
}
-.chat-toolbarbutton:hover {
-/* background-color: rgba(255,255,255,.35);*/
-}
-
-.chat-toolbarbutton:hover:active {
-/* background-color: rgba(255,255,255,.5);*/
-}
-
.chat-toolbarbutton > .toolbarbutton-text {
display: none;
}
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
}
-.chat-close-button:-moz-any(:hover,:hover:active) {
+.chat-close-button:hover {
+ list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
+}
+
+.chat-close-button:hover:active {
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
}
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
}
-.chat-minimize-button:-moz-any(:hover,:hover:active) {
+.chat-minimize-button:hover {
+ list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
+}
+
+.chat-minimize-button:hover:active {
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
}
transform: rotate(180deg);
}
-.chat-swap-button:-moz-any(:hover,:hover:active) {
+.chat-swap-button:hover {
+ list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
+}
+
+.chat-swap-button:hover:active {
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
}
transform: none;
}
+.chat-loop-hangup {
+ list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
+ background-color: #FF0000;
+ border: 1px solid #FFC000;
+ border-top-right-radius: 4px;
+ width: 32px;
+ height: 26px;
+ margin-top: -6px;
+ margin-bottom: -5px;
+ -moz-margin-start: 6px;
+ -moz-margin-end: -5px;
+}
+
+.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
+ background-color: #FFCF00;
+ border-color: #FF0000;
+}
+
.chat-title {
- font-weight: bold;
- font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
+ color: #000000;
text-shadow: none;
cursor: inherit;
}
.chat-titlebar {
background-color: #9C9CFF;
color: #000000;
- height: 30px;
- min-height: 30px;
+ height: 26px;
+ min-height: 26px;
width: 100%;
margin: 0;
- padding: 7px 6px;
- border: none;
- border-bottom: 1px solid #008484;
+ padding: 5px 4px;
+ border: 1px solid #008484;
+ border-bottom: 0;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
cursor: pointer;
+ background-color: #A09090;
+}
+
+.chat-titlebar[selected] {
+ background-color: #008484;
}
.chat-titlebar > .notification-anchor-icon {
background-color: #E7ADE7;
}
-chatbox[dark=true] > .chat-titlebar,
-chatbox[dark=true] > .chat-titlebar[selected] {
-/* border-bottom: none;
- background-color: #000;
- background-image: none;*/
-}
-
-chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
-/* font-weight: normal;
- color: #c1c1c1;*/
-}
-
.chat-frame {
padding: 0;
margin: 0;
}
}
+.chatbar-button:hover {
+ background-color: #FFCF00;
+}
+.chatbar-button[open="true"] {
+ background-color: #FF9F00;
+}
+
+.chatbar-button[activity]:not([open]) {
+ background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
+}
+
.chatbar-button > .toolbarbutton-icon {
width: 16px;
}
-moz-margin-end: 20px;
}
-chatbar > chatbox {
- height: 285px;
- width: 260px;
+chatbox {
-moz-margin-start: 4px;
- background-color: #000000;
- border: 1px solid #9C9CFF;
- border-bottom: none;
- border-top-left-radius: 2.5px;
- border-top-right-radius: 2.5px;
+ background-color: transparent;
+}
+
+chatbar > chatbox {
+ /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
+ go round nicely. */
+/* border-top-left-radius: 4px;
+ border-top-right-radius: 4px;*/
+ /* Offset the chatbox the same amount as the box-shadows' spread, to make it
+ visible. */
+/* -moz-margin-end: 5px;*/
}
chatbox[minimized="true"] {
/* === END chat.inc.css === */
-.chat-titlebar {
-/* background-color: #c4cfde; */
-}
-
-.chat-titlebar[selected] {
-/* background-color: #dae3f0; */
-}
-
-.chatbar-button {
- -moz-appearance: none;
-/* background-color: #c4cfde; */
-}
-
-.chatbar-button > .toolbarbutton-icon {
-/* -moz-margin-end: 0; */
-}
-
-.chatbar-button:hover,
-.chatbar-button[open="true"] {
-/* background-color: #dae3f0; */
-}
-
-.chatbar-button[activity]:not([open="true"]) {
-}
-
-chatbox {
-/* border-top-left-radius: 2.5px;
- border-top-right-radius: 2.5px; */
-}
-
/* === BEGIN plugin-doorhanger.inc.css === */
/**
.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {
padding: 0;
}
+
+/* === BEGIN usercontext.inc.css === */
+
+/* User Context UI browser styles */
+
+#menu_newUserContextTabPersonal {
+ list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
+}
+
+#menu_newUserContextTabWork {
+ list-style-image: url("chrome://browser/skin/usercontext/work.svg");
+}
+
+#menu_newUserContextTabBanking {
+ list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
+}
+
+#menu_newUserContextTabShopping {
+ list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
+}
+
+/* URL Bar Decoration */
+
+#userContext-indicator {
+ height: 16px;
+ width: 16px;
+}
+
+#userContext-label {
+ margin-inline-end: 3px;
+ color: #A09090;
+}
+
+#userContext-icons:not([usercontextid]) {
+ display: none;
+}
+
+#userContext-icons {
+ -moz-box-align: center;
+}
+
+/* Personal User Context */
+#userContext-icons[usercontextid="1"] > #userContext-label {
+ color: #9C9CFF;
+}
+#userContext-icons[usercontextid="1"] > #userContext-indicator {
+ list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
+}
+
+/* Work User Context */
+#userContext-icons[usercontextid="2"] > #userContext-label {
+ color: #FF9F00;
+}
+#userContext-icons[usercontextid="2"] > #userContext-indicator {
+ list-style-image: url("chrome://browser/skin/usercontext/work.svg");
+}
+
+/* Banking User Context */
+#userContext-icons[usercontextid="3"] > #userContext-label {
+ color: #008484;
+}
+#userContext-icons[usercontextid="3"] > #userContext-indicator {
+ list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
+}
+
+/* Shopping User Context */
+#userContext-icons[usercontextid="4"] > #userContext-label {
+ color: #E7ADE7;
+}
+#userContext-icons[usercontextid="4"] > #userContext-indicator {
+ list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
+}
+
+/* === END usercontext.inc.css === */
use {
fill: #FFCF00;
}
+ use[id$="-hover"] {
+ fill: #000000;
+ }
use[id$="-active"] {
fill: #000000;
}
use[id$="-disabled"] {
fill: #8050B0;
}
+ use[id$="-white"] {
+ fill: #000000;
+ }
</style>
<defs>
<polygon id="close-shape" points="10,1.717 8.336,0.049 5.024,3.369 1.663,0 0,1.668 3.36,5.037 0.098,8.307 1.762,9.975 5.025,6.705 8.311,10 9.975,8.332 6.688,5.037"/>
<path id="dropdown-shape" fill-rule="evenodd" d="M9,3L4.984,7L1,3H9z"/>
- <polygon id="expand-shape" points="10,0 4.838,0 6.506,1.669 0,8.175 1.825,10 8.331,3.494 10,5.162"/>
- <rect id="minimize-shape" y="3.6" width="10" height="2.8"/>
+ <g id="expand-shape">
+ <path fill-rule="evenodd" d="M9.429,7.072v2.143c0,0.531-0.188,0.985-0.566,1.363c-0.377,0.377-0.832,0.565-1.363,0.565H1.929 c-0.531,0-0.986-0.188-1.363-0.565C0.188,10.2,0,9.746,0,9.214V3.643c0-0.531,0.188-0.985,0.566-1.362 c0.377-0.378,0.832-0.566,1.363-0.566h4.714c0.062,0,0.114,0.021,0.154,0.061s0.06,0.092,0.06,0.154v0.428 c0,0.063-0.02,0.114-0.06,0.154S6.705,2.572,6.643,2.572H1.929c-0.295,0-0.547,0.104-0.757,0.314S0.857,3.348,0.857,3.643v5.571 c0,0.295,0.105,0.547,0.315,0.757s0.462,0.314,0.757,0.314H7.5c0.294,0,0.547-0.104,0.757-0.314 c0.209-0.21,0.314-0.462,0.314-0.757V7.072c0-0.062,0.02-0.114,0.061-0.154c0.04-0.04,0.091-0.061,0.154-0.061h0.428 c0.062,0,0.114,0.021,0.154,0.061S9.429,7.009,9.429,7.072z"/>
+ <path fill-rule="evenodd" d="M7.07,5.82L6.179,4.93C6.127,4.878,6.101,4.818,6.101,4.75s0.026-0.128,0.079-0.18l2.594-2.594L7.648,0.852 C7.549,0.753,7.5,0.636,7.5,0.5s0.049-0.252,0.148-0.351S7.864,0,8,0h3.5c0.136,0,0.252,0.05,0.351,0.149S12,0.365,12,0.5V4 c0,0.136-0.05,0.253-0.149,0.351C11.752,4.451,11.635,4.5,11.5,4.5c-0.136,0-0.253-0.05-0.352-0.149l-1.124-1.125L7.429,5.82 c-0.052,0.052-0.112,0.079-0.18,0.079"/>
+ </g>
+ <rect id="minimize-shape" y="7.5" width="10" height="2.2"/>
+ <path id="exit-shape" fill-rule="evenodd" d="M5.01905144,3.00017279 C5.01277908,3.00005776 5.0064926,3 5.00019251,3 L1.99980749,3 C1.44371665,3 1,3.44762906 1,3.99980749 L1,7.00019251 C1,7.55628335 1.44762906,8 1.99980749,8 L5.00019251,8 C5.00649341,8 5.01277988,7.99994253 5.01905144,7.99982809 L5.01905144,8.5391818 C5.01905144,10.078915 5.37554713,10.2645548 5.81530684,9.9314625 L10.8239665,6.13769619 C11.2653143,5.80340108 11.2637262,5.26455476 10.8239665,4.93146254 L5.81530684,1.13769619 C5.37395904,0.80340108 5.01905144,0.98023404 5.01905144,1.52997693 L5.01905144,3.00017279 Z M-1,1 L4,1 L4,2 L0,2 L0,9 L4,9 L4,10.0100024 L-1,10.0100021 L-1,1 Z" />
</defs>
<use id="close" xlink:href="#close-shape"/>
<use id="close-active" xlink:href="#close-shape"/>
<use id="close-disabled" xlink:href="#close-shape"/>
+ <use id="close-hover" xlink:href="#close-shape"/>
+ <use id="exit-white" xlink:href="#exit-shape"/>
<use id="expand" xlink:href="#expand-shape"/>
<use id="expand-active" xlink:href="#expand-shape"/>
<use id="expand-disabled" xlink:href="#expand-shape"/>
+ <use id="expand-hover" xlink:href="#expand-shape"/>
<use id="minimize" xlink:href="#minimize-shape"/>
<use id="minimize-active" xlink:href="#minimize-shape"/>
<use id="minimize-disabled" xlink:href="#minimize-shape"/>
+ <use id="minimize-hover" xlink:href="#minimize-shape"/>
</svg>