aboutsummaryrefslogtreecommitdiff
path: root/arc-firefox-theme/chrome/browser/sass/browser-dark.css
diff options
context:
space:
mode:
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass/browser-dark.css')
-rw-r--r--arc-firefox-theme/chrome/browser/sass/browser-dark.css224
1 files changed, 138 insertions, 86 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
index b559ab2..f636bac 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
@@ -40,6 +40,9 @@
height: 1px;
background-color: #2b2e39; }
+#navigator-toolbox:-moz-lwtheme::after {
+ background-color: rgba(0, 0, 0, 0.3); }
+
#navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
-moz-appearance: none;
border-style: none;
@@ -105,7 +108,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton),
toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([open]) {
color: inherit; }
-.bookmark-item:not(#home-button) > .toolbarbutton-icon,
+.bookmark-item > .toolbarbutton-icon,
#personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
width: 16px;
height: 16px; }
@@ -283,7 +286,7 @@ menuitem.bookmark-item {
opacity: 0.7; }
/* Stock icons for the menu bar items */
-menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) {
+menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); }
#placesContext_open\:newwindow,
@@ -794,7 +797,7 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger {
#TabsToolbar #loop-button {
list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg"); }
-#loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active),
+#nav-bar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active),
#TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; }
@@ -1310,7 +1313,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger {
-moz-margin-start: 0; }
.urlbar-history-dropmarker {
- -moz-appearance: toolbarbutton-dropdown; }
+ -moz-appearance: toolbarbutton-dropdown;
+ transition: opacity 0.15s ease; }
+
+#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker {
+ opacity: 0; }
#urlbar-container {
-moz-box-align: center; }
@@ -1377,7 +1384,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger {
#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
-moz-appearance: none;
- -moz-user-focus: ignore;
min-width: 80px;
border-radius: 3px;
padding: 4px 16px;
@@ -1583,10 +1589,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
border-style: solid;
border-color: #2b2e39; }
+/* This changes the direction of the main notification box on the url bar. */
#notification-popup-box:-moz-locale-dir(rtl),
.notification-anchor-icon:-moz-locale-dir(rtl) {
transform: scaleX(-1); }
+/* For the anchor icons in the chat window, we don't have the notification popup box,
+ so we need to cancel the RTL transform. */
+.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
+ transform: none; }
+
.notification-anchor-icon {
list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16);
width: 16px;
@@ -1930,8 +1942,7 @@ notification[value="loop-sharing-notification"] .messageImage {
.ac-result-type-bookmark,
.autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
- list-style-image: url("chrome://browser/skin/places/star-icons.png");
- -moz-image-region: rect(0px 32px 16px 16px);
+ list-style-image: url("chrome://browser/skin/places/autocomplete-star.png");
width: 16px;
height: 16px; }
@@ -2712,6 +2723,12 @@ lwtHeader;*/
/* box-shadow instead of background-color to work around native styling */
box-shadow: inset -5px 0 ThreeDShadow; }
+.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); }
+
/* Sidebar */
#sidebar-throbber[loading="true"] {
list-style-image: url("chrome://global/skin/icons/loading_16.png");
@@ -2775,14 +2792,12 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.sync-panel-button-box {
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 {
+#sync-start-panel-subtitle {
margin: 0; }
/* Status panel */
@@ -2807,19 +2822,45 @@ toolbarbutton.chevron > .toolbarbutton-icon {
border-top-left-radius: .3em;
margin-left: 1em; }
-#full-screen-warning-message {
- background-image: url("chrome://browser/skin/fullscreen-darknoise.png");
- color: white;
- border-radius: 4px;
- margin-top: 30px;
- padding: 30px 50px;
- box-shadow: 0 0 2px white; }
+html|*#fullscreen-warning {
+ align-items: center;
+ background: rgba(45, 62, 72, 0.9);
+ border: 2px solid #fafafa;
+ box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+ padding: 24px 16px;
+ font: message-box; }
+
+html|*#fullscreen-warning::before {
+ margin: 0;
+ width: 24px;
+ height: 24px; }
+
+html|*#fullscreen-warning.verifiedIdentity::before,
+html|*#fullscreen-warning.verifiedDomain::before {
+ content: url("chrome://browser/skin/fullscreen/secure.svg"); }
-.full-screen-description {
- font-size: 150%; }
+html|*#fullscreen-warning.unknownIdentity::before {
+ content: url("chrome://browser/skin/fullscreen/insecure.svg"); }
+
+html|*#fullscreen-domain-text,
+html|*#fullscreen-generic-text {
+ font-size: 21px;
+ font-weight: lighter;
+ color: #fafafa;
+ margin: 0 16px; }
+
+html|*#fullscreen-domain {
+ font-weight: bold;
+ margin: 0; }
-#full-screen-domain-text {
- font-size: 300%; }
+html|*#fullscreen-exit-button {
+ padding: 5px 30px;
+ font: message-box;
+ font-size: 14px;
+ font-weight: lighter;
+ margin: 0;
+ box-sizing: content-box; }
/* Responsive Mode */
.browserContainer[responsivemode] {
@@ -2946,7 +2987,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.devtools-responsiveui-rotate {
list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-close {
list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); }
@@ -2959,7 +3000,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.devtools-responsiveui-touch[checked] {
-moz-image-region: rect(0px, 32px, 16px, 16px); }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-touch {
list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
-moz-image-region: rect(0px, 32px, 32px, 0px); }
@@ -2969,7 +3010,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.devtools-responsiveui-screenshot {
list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-screenshot {
list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } }
.devtools-responsiveui-resizebarV {
@@ -3027,11 +3068,13 @@ toolbarbutton.chevron > .toolbarbutton-icon {
background-image: linear-gradient(to right, #111 11%, #333 56%); }
.devtools-responsiveui-home-button {
+ -moz-user-focus: ignore;
width: 40px;
height: 30px;
list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); }
.devtools-responsiveui-sleep-button {
+ -moz-user-focus: ignore;
-moz-appearance: none;
/* compensate browserStack top padding */
margin-top: -67px;
@@ -3053,6 +3096,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.devtools-responsiveui-volume-up-button,
.devtools-responsiveui-volume-down-button {
+ -moz-user-focus: ignore;
-moz-appearance: none;
border: 1px solid red;
min-width: 8px;
@@ -3071,7 +3115,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
.devtools-responsiveui-volume-down-button {
border-bottom-left-radius: 12px; }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.devtools-responsiveui-resizebarV {
background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); }
@@ -3159,7 +3203,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
#developer-toolbar-toolbox-button[checked=true] {
-moz-image-region: rect(0px, 64px, 16px, 48px); }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
#developer-toolbar-toolbox-button {
list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
-moz-image-region: rect(0px, 32px, 32px, 0px); }
@@ -3181,7 +3225,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
width: 16px;
opacity: 0.6; }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
#developer-toolbar-closebutton {
list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } }
#developer-toolbar-closebutton > .toolbarbutton-icon {
@@ -3252,7 +3296,7 @@ html|*#gcli-output-frame {
.gclitoolbar-input-node[focused="true"]::before {
background-position: -16px center; }
-@media (min-resolution: 1.25dppx) {
+@media (min-resolution: 1.1dppx) {
.gclitoolbar-input-node::before {
background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } }
.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
@@ -3652,12 +3696,6 @@ toolbar[brighttext] #downloads-indicator-counter {
margin: 0;
background: none; }
-.chat-toolbarbutton:hover {
- background-color: rgba(255, 255, 255, 0.35); }
-
-.chat-toolbarbutton:hover:active {
- background-color: rgba(255, 255, 255, 0.5); }
-
.chat-toolbarbutton > .toolbarbutton-text {
display: none; }
@@ -3668,40 +3706,70 @@ toolbar[brighttext] #downloads-indicator-counter {
.chat-close-button {
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"); }
.chat-minimize-button {
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"); }
.chat-swap-button {
list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
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"); }
chatbar > chatbox > .chat-titlebar > .chat-swap-button {
transform: none; }
+.chat-loop-hangup {
+ list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
+ background-color: #d13f1a;
+ border: 1px solid #d13f1a;
+ 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: #ef6745;
+ border-color: #ef6745; }
+
.chat-title {
- font-weight: bold;
- color: black;
+ color: #666;
text-shadow: none;
cursor: inherit; }
.chat-titlebar {
- height: 30px;
- min-height: 30px;
+ height: 26px;
+ min-height: 26px;
width: 100%;
margin: 0;
- padding: 7px 6px;
- border: none;
- border-bottom: 1px solid #ccc;
- cursor: pointer; }
+ padding: 5px 4px;
+ border: 1px solid #ebebeb;
+ border-bottom: 0;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ cursor: pointer;
+ background-color: #ebebeb; }
+
+.chat-titlebar[selected] {
+ background-color: #f0f0f0; }
.chat-titlebar > .notification-anchor-icon {
margin-left: 2px;
@@ -3716,16 +3784,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button {
background-size: 100% 20px;
background-position: 0 -10px; }
-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;
@@ -3738,11 +3796,22 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
height: 21px;
width: 21px;
border: 1px solid #ccc;
- border-bottom: none; }
+ border-bottom: none;
+ background-color: #d9d9d9;
+ background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent);
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px; }
@media (min-resolution: 2dppx) {
.chatbar-button {
list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } }
+.chatbar-button:hover,
+.chatbar-button[open="true"] {
+ background-color: #f0f0f0; }
+
+.chatbar-button[activity]:not([open]) {
+ background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); }
+
.chatbar-button > .toolbarbutton-icon {
width: 16px; }
@@ -3771,41 +3840,24 @@ chatbar {
chatbox {
-moz-margin-start: 4px;
- background-color: white;
- border: 1px solid #ccc;
- border-bottom: none; }
+ 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;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+ /* Offset the chatbox the same amount as the box-shadows' spread, to make it
+ visible. */
+ -moz-margin-end: 5px; }
window > chatbox {
-moz-margin-start: 0px;
margin: 0px;
border: none;
- padding: 0px; }
-
-.chat-titlebar {
- background-color: #d9d9d9;
- background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); }
-
-.chat-titlebar[selected] {
- background-color: #f0f0f0; }
-
-.chatbar-button {
- -moz-appearance: none;
- background-color: #d9d9d9;
- background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); }
-
-.chatbar-button > .toolbarbutton-icon {
- -moz-margin-end: 0; }
-
-.chatbar-button:hover,
-.chatbar-button[open="true"] {
- background-color: #f0f0f0; }
-
-.chatbar-button[activity] {
- background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); }
-
-chatbox {
- border-top-left-radius: 2.5px;
- border-top-right-radius: 2.5px; }
+ padding: 0px;
+ border-radius: 4px; }
/* Customization mode */
/* This Source Code Form is subject to the terms of the Mozilla Public