aboutsummaryrefslogtreecommitdiff
path: root/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
diff options
context:
space:
mode:
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass/_browser-sass.scss')
-rw-r--r--arc-firefox-theme/chrome/browser/sass/_browser-sass.scss246
1 files changed, 153 insertions, 93 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
index dfb78a4..fd0d813 100644
--- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
@@ -63,6 +63,10 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path);
background-color: $borders_color;
}
+#navigator-toolbox:-moz-lwtheme::after {
+ background-color: rgba(0,0,0,.3);
+}
+
#navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) {
-moz-appearance: none;
border-style: none;
@@ -149,7 +153,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([op
// -moz-padding-end: 2px;
//}
-.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;
@@ -354,7 +358,7 @@ menuitem.bookmark-item {
}
/* 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");
}
@@ -1084,7 +1088,7 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger {
#TabsToolbar & { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/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;
}
@@ -1734,6 +1738,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger {
.urlbar-history-dropmarker {
-moz-appearance: toolbarbutton-dropdown;
+ transition: opacity 0.15s ease;
+}
+
+#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker {
+ opacity: 0;
}
#urlbar-container {
@@ -1853,7 +1862,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;
@@ -2149,11 +2157,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box
// padding-left: 7px;
//}
+/* This changes the direction of the main notification box on the url bar. */
#notification-popup-box:-moz-locale-dir(rtl),
+/* This adds a second flip for the notification anchors, as they don't switch direction
+ for RTL mode. */
.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;
@@ -2593,8 +2610,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;
}
@@ -3672,6 +3688,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
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");
@@ -3753,15 +3777,13 @@ toolbarbutton.chevron > .toolbarbutton-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 {
+#sync-start-panel-subtitle {
margin: 0;
}
@@ -3791,23 +3813,52 @@ toolbarbutton.chevron > .toolbarbutton-icon {
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;
}
-.full-screen-description {
- font-size: 150%;
+html|*#fullscreen-warning.verifiedIdentity::before,
+html|*#fullscreen-warning.verifiedDomain::before {
+ content: url("chrome://browser/skin/fullscreen/secure.svg");
}
-#full-screen-domain-text {
- font-size: 300%;
+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;
+}
+
+html|*#fullscreen-exit-button {
+ padding: 5px 30px;
+ font: message-box;
+ font-size: 14px;
+ font-weight: lighter;
+ margin: 0;
+ box-sizing: content-box;
+}
/* Responsive Mode */
@@ -3960,7 +4011,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
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");
}
@@ -3979,7 +4030,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
-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);
@@ -3994,7 +4045,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
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");
}
@@ -4069,12 +4120,14 @@ toolbarbutton.chevron > .toolbarbutton-icon {
}
.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;
@@ -4102,6 +4155,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;
@@ -4126,7 +4180,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
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");
}
@@ -4218,7 +4272,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
-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);
@@ -4247,7 +4301,7 @@ toolbarbutton.chevron > .toolbarbutton-icon {
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");
}
@@ -4335,7 +4389,7 @@ html|*#gcli-output-frame {
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");
}
@@ -4826,14 +4880,6 @@ toolbar[brighttext] #downloads-indicator-counter {
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;
}
@@ -4847,7 +4893,11 @@ toolbar[brighttext] #downloads-indicator-counter {
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");
}
@@ -4855,7 +4905,11 @@ toolbar[brighttext] #downloads-indicator-counter {
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");
}
@@ -4864,7 +4918,11 @@ toolbar[brighttext] #downloads-indicator-counter {
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");
}
@@ -4872,22 +4930,46 @@ 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;
+ 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 {
@@ -4906,18 +4988,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button {
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;
@@ -4932,6 +5002,10 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
width: 21px;
border: 1px solid #ccc;
border-bottom: none;
+ background-color: #d9d9d9;
+ background-image: linear-gradient(rgba(255,255,255,.43), transparent);
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
}
@media (min-resolution: 2dppx) {
@@ -4940,6 +5014,15 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title {
}
}
+.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, rgb(254,254,255) 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;
}
@@ -4975,9 +5058,18 @@ 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,.3);
+ /* Offset the chatbox the same amount as the box-shadows' spread, to make it
+ visible. */
+ -moz-margin-end: 5px;
}
window > chatbox {
@@ -4985,39 +5077,7 @@ window > chatbox {
margin: 0px;
border: none;
padding: 0px;
-}
-
-.chat-titlebar {
- background-color: #d9d9d9;
- background-image: linear-gradient(rgba(255,255,255,.3), transparent);
-}
-
-.chat-titlebar[selected] {
- background-color: #f0f0f0;
-}
-
-.chatbar-button {
- -moz-appearance: none;
- background-color: #d9d9d9;
- background-image: linear-gradient(rgba(255,255,255,.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, rgb(233,242,252) 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;
+ border-radius: 4px;
}
/* Customization mode */