From 377f4fa1aaca634266ab043c5fc26366c5053b89 Mon Sep 17 00:00:00 2001 From: Till Höppner Date: Thu, 25 May 2017 16:39:55 +0200 Subject: Solarize assets --- .../chrome/browser/sass/_browser-sass.scss | 6 +- arc-firefox-theme/chrome/browser/sass/_colors.scss | 56 ++++----- .../chrome/browser/sass/browser-dark.css | 138 ++++++++++----------- .../chrome/browser/sass/browser-darker.css | 102 +++++++-------- .../chrome/browser/sass/browser-light.css | 88 ++++++------- 5 files changed, 195 insertions(+), 195 deletions(-) diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 90b5124..0a24e88 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -3837,7 +3837,7 @@ html|*.pointerlockfswarning-exit-button { border-radius: 25px / 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-width: 0; background-color: #353535; @@ -3852,7 +3852,7 @@ html|*.pointerlockfswarning-exit-button { -moz-appearance: none; padding: 20px; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-top-width: 0; @@ -3945,7 +3945,7 @@ html|*.pointerlockfswarning-exit-button { #browser-bottombox[devtoolstheme="light"] #developer-toolbar { --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ - --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */ + --gcli-input-focused-background: #fdf6e3; /* --theme-sidebar-background */ --gcli-input-color: #393f4c; /* --theme-body-color */ --gcli-border-color: #dde1e4; /* --theme-splitter-color */ --selection-background: #4c9ed9; /* --theme-selection-background */ diff --git a/arc-firefox-theme/chrome/browser/sass/_colors.scss b/arc-firefox-theme/chrome/browser/sass/_colors.scss index 47daa0f..c709fe4 100644 --- a/arc-firefox-theme/chrome/browser/sass/_colors.scss +++ b/arc-firefox-theme/chrome/browser/sass/_colors.scss @@ -2,13 +2,13 @@ // it gets @if ed depending on $variant -$base_color: if($variant =='light', #ffffff, #404552); -$text_color: if($variant == 'light', #5c616c, #D3DAE3); -$bg_color: if($variant =='light', #F5F6F7, #383C4A); -$fg_color: if($variant =='light', #5c616c, #D3DAE3); +$base_color: if($variant =='light', #fdf6e3, #073642); +$text_color: if($variant == 'light', #5c616c, #657b83); +$bg_color: if($variant =='light', #F5F6F7, #002b36); +$fg_color: if($variant =='light', #5c616c, #657b83); -$selected_fg_color: #ffffff; -$selected_bg_color: #5294E2; +$selected_fg_color: #fdf6e3; +$selected_bg_color: #268bd2; $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: if($variant =='light', darken($bg_color,9%), darken($bg_color,6%)); @@ -18,31 +18,31 @@ $link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%)); $selection_mode_bg: if($transparency == 'true', transparentize($selected_bg_color, 0.05), $selected_bg_color); -$warning_color: #F27835; -$error_color: #FC4138; -$success_color: #73d216; -$destructive_color: #F04A50; -$suggested_color: #4DADD4; +$warning_color: #cb4b16; +$error_color: #dc322f; +$success_color: #859900; +$destructive_color: #dc322f; +$suggested_color: #2aa198; //insensitive state derived colors $insensitive_fg_color: if($variant == 'light', transparentize($fg_color, 0.45), transparentize($fg_color, 0.55)); $insensitive_bg_color: if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%)); $header_bg: red; -@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#e7e8eb, 0.05); } -@if $transparency=='false' and $variant=='light' { $header_bg: #e7e8eb; } -@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#2f343f, 0.03); } -@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #2f343f; } +@if $transparency=='true' and $variant=='light' { $header_bg: transparentize(#eee8d5, 0.05); } +@if $transparency=='false' and $variant=='light' { $header_bg: #eee8d5; } +@if $transparency=='true' and ($variant=='dark' or $darker=='true') { $header_bg: transparentize(#002b36, 0.03); } +@if $transparency=='false' and ($variant=='dark' or $darker=='true') { $header_bg: #002b36; } $header_bg_backdrop: if($darker == 'true' or $variant == 'dark', lighten($header_bg, 1.5%), lighten($header_bg, 3%)); $header_border: if($variant == 'light' and $darker=='false', darken($header_bg, 7%), darken($header_bg, 4%)); $header_fg: if($variant == 'light', saturate(transparentize($fg_color, 0.2), 10%), saturate(transparentize($fg_color, 0.2), 10%)); -$header_fg: if($darker == 'true', saturate(transparentize(#D3DAE3, 0.2), 10%), $header_fg); +$header_fg: if($darker == 'true', saturate(transparentize(#657b83, 0.2), 10%), $header_fg); -$dark_sidebar_bg: if($transparency == 'true', transparentize(#353945, 0.05), #353945); -$dark_sidebar_fg: #BAC3CF; +$dark_sidebar_bg: if($transparency == 'true', transparentize(#073642, 0.05), #073642); +$dark_sidebar_fg: #657b83; $dark_sidebar_border: if($variant == 'light', $dark_sidebar_bg, darken($dark_sidebar_bg, 5%)); $osd_fg_color: $dark_sidebar_fg; @@ -62,7 +62,7 @@ $panel_bg: darken($dark_sidebar_bg, 4.7%); $panel_fg: $dark_sidebar_fg; $entry_bg: if($variant=='light', $base_color, lighten($base_color, 0%)); -$entry_border: if($variant == 'light', #cfd6e6, darken($borders_color, 0%)); +$entry_border: if($variant == 'light', #657b83, darken($borders_color, 0%)); $header_entry_bg: if($darker == 'true' or $variant == 'dark', transparentize(lighten($header_bg, 22%), 0.6), transparentize($base_color, 0.1)); $header_entry_border: if($darker == 'true' or $variant == 'dark', transparentize(darken($header_bg, 12%), 0.6), transparentize($header_fg, 0.7)); @@ -76,19 +76,19 @@ $header_button_border: if($darker == 'true' or $variant == 'dark', transparentiz //WM Buttons // Close -$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #cc575d); -$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #d7787d); -$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #be3841); +$wm_button_close_bg: if($variant == 'light' and $darker == 'false', #f46067, #dc322f); +$wm_button_close_hover_bg: if($variant == 'light' and $darker == 'false', #f68086, #cb4b16); +$wm_button_close_active_bg: if($variant == 'light' and $darker == 'false', #f13039, #dc322f); -$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#F8F8F9 , #2f343f); +$wm_icon_close_bg: if($variant == 'light' and $darker == 'false',#657b83 , #002b36); // Minimize, Maximize -$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #454C5C); +$wm_button_hover_bg: if($variant == 'light' and $darker == 'false', #fdfdfd, #657b83); $wm_button_active_bg: $selected_bg_color; -$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #262932); +$wm_button_hover_border: if($variant == 'light' and $darker == 'false', #D1D3DA, #002b36); -$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #90939B); -$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #666A74); -$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #C4C7CC); +$wm_icon_bg: if($variant == 'light' and $darker == 'false', #90949E, #93a1a1); +$wm_icon_unfocused_bg: if($variant == 'light' and $darker == 'false', #B6B8C0, #657b83); +$wm_icon_hover_bg: if($variant == 'light' and $darker == 'false', #7A7F8B, #93a1a1); $wm_icon_active_bg: $selected_fg_color; diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 1171e26..8fb6d6a 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -7,13 +7,13 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* navbarInsetHighlight is tightly coupled to the toolbarHighlight constant. */ :root { - --toolbarbutton-hover-background: #444a58; + --toolbarbutton-hover-background: #083e4b; --toolbarbutton-hover-boxshadow: none; - --toolbarbutton-hover-bordercolor: #2b2e39; + --toolbarbutton-hover-bordercolor: #001317; --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: #2b2e39; - --toolbarbutton-active-background: #5294E2; - --toolbarbutton-checkedhover-backgroundcolor: #5294E2; + --toolbarbutton-active-bordercolor: #001317; + --toolbarbutton-active-background: #268bd2; + --toolbarbutton-checkedhover-backgroundcolor: #268bd2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; @@ -42,7 +42,7 @@ -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */ height: 1px; - background-color: #2b2e39; } + background-color: #001317; } #navigator-toolbox:-moz-lwtheme::after { background-color: rgba(0, 0, 0, 0.3); } @@ -50,7 +50,7 @@ #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) { -moz-appearance: none; border-style: none; - background-color: #383C4A; } + background-color: #002b36; } #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) { padding-top: 1px; @@ -67,7 +67,7 @@ transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } #TabsToolbar:not([collapsed="true"]) + #nav-bar { - border-top: 1px solid rgba(38, 42, 51, 0.97) !important; + border-top: 1px solid rgba(0, 27, 34, 0.97) !important; background-clip: padding-box; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); @@ -76,11 +76,11 @@ z-index: 1; } #main-window[htitlemode=always] #TabsToolbar { - box-shadow: inset 0 1px rgba(54, 59, 72, 0.97) !important; } + box-shadow: inset 0 1px rgba(0, 55, 69, 0.97) !important; } #nav-bar { background-image: none !important; - background-color: #383C4A !important; + background-color: #002b36 !important; box-shadow: none; padding-top: 3px; padding-bottom: 3px; } @@ -137,19 +137,19 @@ toolbarbutton.bookmark-item { border: 1px solid transparent; border-radius: 2px; background: none; - color: #D3DAE3; } + color: #657b83; } toolbarbutton.bookmark-item:not([disabled=true]):hover { -moz-appearance: none; - color: #D3DAE3; - background-color: #505666; - border: 1px solid #2b2e39; } + color: #657b83; + background-color: #0a5062; + border: 1px solid #001317; } toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) { -moz-appearance: none; - color: #ffffff; - background-color: #5294E2; - border: 1px solid #2b2e39; } + color: #fdf6e3; + background-color: #268bd2; + border: 1px solid #001317; } /* ----- BOOKMARK STAR ANIMATION ----- */ @keyframes animation-bookmarkAdded { @@ -356,9 +356,9 @@ menuitem.bookmark-item { #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background-color: none; - color: rgba(207, 218, 231, 0.8); - border-color: rgba(21, 23, 28, 0.37); - background-color: rgba(95, 105, 127, 0.37); + color: rgba(89, 128, 143, 0.8); + border-color: rgba(0, 0, 0, 0.37); + background-color: rgba(0, 132, 166, 0.37); background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, @@ -378,9 +378,9 @@ menuitem.bookmark-item { #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; - color: #ffffff; - border-color: rgba(21, 23, 28, 0.37); - background-color: #5294E2; + color: #fdf6e3; + border-color: rgba(0, 0, 0, 0.37); + background-color: #268bd2; background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { @@ -413,11 +413,11 @@ menuitem.bookmark-item { #nav-bar .toolbaritem-combined-buttons:not(:hover) > separator, #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - background: #2b2e39; } + background: #001317; } #TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, #TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - background: rgba(207, 218, 231, 0.15); } + background: rgba(89, 128, 143, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { margin-inline-start: -4px; } @@ -942,16 +942,16 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { border-radius: 3px; margin: 0 3px; min-height: 28px; - color: #D3DAE3; - background-color: #404552; - border: 1px solid #2b2e39; } + color: #657b83; + background-color: #073642; + border: 1px solid #001317; } #urlbar[focused], .searchbar-textbox[focused] { - color: #D3DAE3; - background-color: #404552; - border: 1px solid #2b2e39; - box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; } + color: #657b83; + background-color: #073642; + border: 1px solid #001317; + box-shadow: inset 0 1px #268bd2, inset 0 -1px #268bd2, inset 1px 0 #268bd2, inset -1px 0 #268bd2; } .searchbar-textbox { border-radius: 20px; @@ -1210,7 +1210,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid rgba(43, 46, 57, 0.5); + border-inline-end: 1px solid rgba(0, 19, 23, 0.5); font-size: .9em; padding: 3px 9px 3px 7px; margin-inline-end: 5px; @@ -1807,7 +1807,7 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/reload-stop-go.png"); padding: 0 7px 0 10px; margin-inline-start: 5px; - border-inline-start: 1px solid rgba(43, 46, 57, 0.5); } + border-inline-start: 1px solid rgba(0, 19, 23, 0.5); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } @@ -2008,33 +2008,33 @@ html|span.ac-emphasize-text-url { /* Findbar */ .browserContainer > findbar { - background-color: #383C4A; - color: #D3DAE3; + background-color: #002b36; + color: #657b83; border-top: 1px solid; - -moz-border-top-colors: #2b2e39; + -moz-border-top-colors: #001317; text-shadow: none; } .browserContainer > findbar .findbar-textbox { -moz-appearance: none; - color: #D3DAE3; - border: 1px solid #2b2e39; - background-color: #404552; + color: #657b83; + border: 1px solid #001317; + background-color: #073642; box-shadow: none; margin: 0; padding: 5px; width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { - border-color: #2b2e39; - box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; } + border-color: #001317; + box-shadow: inset 0 1px #268bd2, inset 0 -1px #268bd2, inset 1px 0 #268bd2, inset -1px 0 #268bd2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { - background-color: #FC4138; - border-color: #2b2e39; - color: #ffffff; + background-color: #dc322f; + border-color: #001317; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { - background-color: #F27835; - border-color: #2b2e39; - color: #ffffff; + background-color: #cb4b16; + border-color: #001317; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; @@ -2048,8 +2048,8 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous, .browserContainer > findbar .findbar-find-next { - background: #444a58; - border: 1px solid #2b2e39; + background: #083e4b; + border: 1px solid #001317; box-shadow: none; } .browserContainer > findbar .findbar-find-previous { @@ -2057,15 +2057,15 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - outline: 1px dashed rgba(211, 218, 227, 0.3); + outline: 1px dashed rgba(101, 123, 131, 0.3); outline-offset: -3px; box-shadow: none; } .browserContainer > findbar .findbar-find-previous:not([disabled]):active, .browserContainer > findbar .findbar-find-next:not([disabled]):active { - outline-color: rgba(255, 255, 255, 0.3); - background: #5294E2; - border-color: #2b2e39; + outline-color: rgba(253, 246, 227, 0.3); + background: #268bd2; + border-color: #001317; box-shadow: none; } /* Tabstrip */ @@ -2102,7 +2102,7 @@ html|span.ac-emphasize-text-url { .tabbrowser-tab[selected="true"], .tabbrowser-tab[selected="true"]:hover, .tabbrowser-tab:not([selected="true"]):hover { - color: #D3DAE3; } + color: #657b83; } /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ .tabbrowser-tab[visuallyselected=true] { @@ -2306,9 +2306,9 @@ html|span.ac-emphasize-text-url { color: inherit; } .tabbrowser-tab:not([selected="true"]) { - color: rgba(207, 218, 231, 0.6); } + color: rgba(89, 128, 143, 0.6); } .tabbrowser-tab:not([selected="true"]):hover { - color: rgba(207, 218, 231, 0.8); } + color: rgba(89, 128, 143, 0.8); } /* Selected tab */ /* @@ -2459,8 +2459,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme) { -moz-appearance: none; - color: rgba(207, 218, 231, 0.8); - background: #2f343f; } + color: rgba(89, 128, 143, 0.8); + background: #002b36; } #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag), #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { @@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon { .statuspanel-label { margin: 0; padding: 2px 4px; - background: #5294E2; - border: 1px none #5294E2; + background: #268bd2; + border: 1px none #268bd2; border-top-style: solid; - color: #ffffff; + color: #fdf6e3; text-shadow: none; } .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), @@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon { html|*.pointerlockfswarning { align-items: center; - color: #BAC3CF; - background: rgba(53, 57, 69, 0.95); - border: 1px solid rgba(31, 33, 40, 0.95); + color: #657b83; + background: rgba(7, 54, 66, 0.95); + border: 1px solid rgba(2, 16, 20, 0.95); box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 24px 16px; @@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-toolbarbutton[open=true], .devtools-responsiveui-toolbarbutton[checked=true] { border-color: rgba(12, 13, 14, 0.6) !important; - background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4)); + background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4)); box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[checked=true] { @@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button { border-radius: 25px / 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-width: 0; background-color: #353535; box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; @@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-hardware-buttons { -moz-appearance: none; padding: 20px; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-top-width: 0; @@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button { /* --theme-tab-toolbar-background */ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ - --gcli-input-focused-background: #ffffff; + --gcli-input-focused-background: #fdf6e3; /* --theme-sidebar-background */ --gcli-input-color: #393f4c; /* --theme-body-color */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index ddc4dfd..9d0adfd 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -9,11 +9,11 @@ :root { --toolbarbutton-hover-background: #fbfbfc; --toolbarbutton-hover-boxshadow: none; - --toolbarbutton-hover-bordercolor: #cfd6e6; + --toolbarbutton-hover-bordercolor: #657b83; --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: #5294E2; - --toolbarbutton-active-background: #5294E2; - --toolbarbutton-checkedhover-backgroundcolor: #5294E2; + --toolbarbutton-active-bordercolor: #268bd2; + --toolbarbutton-active-background: #268bd2; + --toolbarbutton-checkedhover-backgroundcolor: #268bd2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; @@ -67,7 +67,7 @@ transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } #TabsToolbar:not([collapsed="true"]) + #nav-bar { - border-top: 1px solid rgba(38, 42, 51, 0.97) !important; + border-top: 1px solid rgba(0, 27, 34, 0.97) !important; background-clip: padding-box; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); @@ -76,7 +76,7 @@ z-index: 1; } #main-window[htitlemode=always] #TabsToolbar { - box-shadow: inset 0 1px rgba(54, 59, 72, 0.97) !important; } + box-shadow: inset 0 1px rgba(0, 55, 69, 0.97) !important; } #nav-bar { background-image: none !important; @@ -143,13 +143,13 @@ toolbarbutton.bookmark-item:not([disabled=true]):hover { -moz-appearance: none; color: #5c616c; background-color: white; - border: 1px solid #cfd6e6; } + border: 1px solid #657b83; } toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) { -moz-appearance: none; - color: #ffffff; - background-color: #5294E2; - border: 1px solid #5294E2; } + color: #fdf6e3; + background-color: #268bd2; + border: 1px solid #268bd2; } /* ----- BOOKMARK STAR ANIMATION ----- */ @keyframes animation-bookmarkAdded { @@ -356,9 +356,9 @@ menuitem.bookmark-item { #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background-color: none; - color: rgba(207, 218, 231, 0.8); - border-color: rgba(21, 23, 28, 0.37); - background-color: rgba(95, 105, 127, 0.37); + color: rgba(89, 128, 143, 0.8); + border-color: rgba(0, 0, 0, 0.37); + background-color: rgba(0, 132, 166, 0.37); background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, @@ -378,9 +378,9 @@ menuitem.bookmark-item { #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; - color: #ffffff; - border-color: rgba(21, 23, 28, 0.37); - background-color: #5294E2; + color: #fdf6e3; + border-color: rgba(0, 0, 0, 0.37); + background-color: #268bd2; background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { @@ -417,7 +417,7 @@ menuitem.bookmark-item { #TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator, #TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before { - background: rgba(207, 218, 231, 0.15); } + background: rgba(89, 128, 143, 0.15); } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { margin-inline-start: -4px; } @@ -943,14 +943,14 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { margin: 0 3px; min-height: 28px; color: #5c616c; - background-color: #ffffff; - border: 1px solid #cfd6e6; } + background-color: #fdf6e3; + border: 1px solid #657b83; } #urlbar[focused], .searchbar-textbox[focused] { color: #5c616c; - background-color: #ffffff; - border: 1px solid #5294E2; } + background-color: #fdf6e3; + border: 1px solid #268bd2; } .searchbar-textbox { border-radius: 20px; @@ -1209,7 +1209,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid rgba(207, 214, 230, 0.5); + border-inline-end: 1px solid rgba(101, 123, 131, 0.5); font-size: .9em; padding: 3px 9px 3px 7px; margin-inline-end: 5px; @@ -1806,7 +1806,7 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/reload-stop-go.png"); padding: 0 7px 0 10px; margin-inline-start: 5px; - border-inline-start: 1px solid rgba(207, 214, 230, 0.5); } + border-inline-start: 1px solid rgba(101, 123, 131, 0.5); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } @@ -2016,25 +2016,25 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-textbox { -moz-appearance: none; color: #5c616c; - border: 1px solid #cfd6e6; - background-color: #ffffff; + border: 1px solid #657b83; + background-color: #fdf6e3; box-shadow: none; margin: 0; padding: 5px; width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { - border-color: #5294E2; } + border-color: #268bd2; } .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { - border-left-color: #5294E2; } + border-left-color: #268bd2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { - background-color: #FC4138; - border-color: #fb1b10; - color: #ffffff; + background-color: #dc322f; + border-color: #c22321; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { - background-color: #F27835; - border-color: #ef5f0f; - color: #ffffff; + background-color: #cb4b16; + border-color: #a63d12; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; @@ -2049,7 +2049,7 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous, .browserContainer > findbar .findbar-find-next { background: #fbfbfc; - border: 1px solid #cfd6e6; + border: 1px solid #657b83; box-shadow: none; } .browserContainer > findbar .findbar-find-previous { @@ -2063,9 +2063,9 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous:not([disabled]):active, .browserContainer > findbar .findbar-find-next:not([disabled]):active { - outline-color: rgba(255, 255, 255, 0.3); - background: #5294E2; - border-color: #5294E2; + outline-color: rgba(253, 246, 227, 0.3); + background: #268bd2; + border-color: #268bd2; box-shadow: none; } /* Tabstrip */ @@ -2306,9 +2306,9 @@ html|span.ac-emphasize-text-url { color: inherit; } .tabbrowser-tab:not([selected="true"]) { - color: rgba(207, 218, 231, 0.6); } + color: rgba(89, 128, 143, 0.6); } .tabbrowser-tab:not([selected="true"]):hover { - color: rgba(207, 218, 231, 0.8); } + color: rgba(89, 128, 143, 0.8); } /* Selected tab */ /* @@ -2459,8 +2459,8 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme) { -moz-appearance: none; - color: rgba(207, 218, 231, 0.8); - background: #2f343f; } + color: rgba(89, 128, 143, 0.8); + background: #002b36; } #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag), #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { @@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon { .statuspanel-label { margin: 0; padding: 2px 4px; - background: #5294E2; - border: 1px none #5294E2; + background: #268bd2; + border: 1px none #268bd2; border-top-style: solid; - color: #ffffff; + color: #fdf6e3; text-shadow: none; } .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), @@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon { html|*.pointerlockfswarning { align-items: center; - color: #BAC3CF; - background: rgba(53, 57, 69, 0.95); - border: 1px solid rgba(31, 33, 40, 0.95); + color: #657b83; + background: rgba(7, 54, 66, 0.95); + border: 1px solid rgba(2, 16, 20, 0.95); box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 24px 16px; @@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-toolbarbutton[open=true], .devtools-responsiveui-toolbarbutton[checked=true] { border-color: rgba(12, 13, 14, 0.6) !important; - background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4)); + background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4)); box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[checked=true] { @@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button { border-radius: 25px / 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-width: 0; background-color: #353535; box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; @@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-hardware-buttons { -moz-appearance: none; padding: 20px; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-top-width: 0; @@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button { /* --theme-tab-toolbar-background */ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ - --gcli-input-focused-background: #ffffff; + --gcli-input-focused-background: #fdf6e3; /* --theme-sidebar-background */ --gcli-input-color: #393f4c; /* --theme-body-color */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index e3de08a..862b197 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -9,11 +9,11 @@ :root { --toolbarbutton-hover-background: #fbfbfc; --toolbarbutton-hover-boxshadow: none; - --toolbarbutton-hover-bordercolor: #cfd6e6; + --toolbarbutton-hover-bordercolor: #657b83; --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: #5294E2; - --toolbarbutton-active-background: #5294E2; - --toolbarbutton-checkedhover-backgroundcolor: #5294E2; + --toolbarbutton-active-bordercolor: #268bd2; + --toolbarbutton-active-background: #268bd2; + --toolbarbutton-checkedhover-backgroundcolor: #268bd2; --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(23, 51, 79, 0.2) 0, rgba(23, 51, 79, 0.2) 18px); --verified-identity-box-backgroundcolor: transparent; @@ -67,7 +67,7 @@ transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } #TabsToolbar:not([collapsed="true"]) + #nav-bar { - border-top: 1px solid rgba(212, 213, 219, 0.95) !important; + border-top: 1px solid rgba(228, 218, 188, 0.95) !important; background-clip: padding-box; /* Move up into the TabsToolbar for the inner highlight at the top of the nav-bar */ margin-top: calc(-1 * var(--navbar-tab-toolbar-highlight-overlap)); @@ -76,7 +76,7 @@ z-index: 1; } #main-window[htitlemode=always] #TabsToolbar { - box-shadow: inset 0 1px rgba(239, 240, 242, 0.95) !important; } + box-shadow: inset 0 1px rgba(242, 238, 224, 0.95) !important; } #nav-bar { background-image: none !important; @@ -143,13 +143,13 @@ toolbarbutton.bookmark-item:not([disabled=true]):hover { -moz-appearance: none; color: #5c616c; background-color: white; - border: 1px solid #cfd6e6; } + border: 1px solid #657b83; } toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :hover:active) { -moz-appearance: none; - color: #ffffff; - background-color: #5294E2; - border: 1px solid #5294E2; } + color: #fdf6e3; + background-color: #268bd2; + border: 1px solid #268bd2; } /* ----- BOOKMARK STAR ANIMATION ----- */ @keyframes animation-bookmarkAdded { @@ -378,9 +378,9 @@ menuitem.bookmark-item { #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-stack, #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; - color: #ffffff; - border-color: #5294E2; - background-color: #5294E2; + color: #fdf6e3; + border-color: #268bd2; + background-color: #268bd2; background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { @@ -943,14 +943,14 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { margin: 0 3px; min-height: 28px; color: #5c616c; - background-color: #ffffff; - border: 1px solid #cfd6e6; } + background-color: #fdf6e3; + border: 1px solid #657b83; } #urlbar[focused], .searchbar-textbox[focused] { color: #5c616c; - background-color: #ffffff; - border: 1px solid #5294E2; } + background-color: #fdf6e3; + border: 1px solid #268bd2; } .searchbar-textbox { border-radius: 20px; @@ -1209,7 +1209,7 @@ toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button { #identity-box { --identity-box-verified-color: #479900; --identity-box-chrome-color: #e57300; - border-inline-end: 1px solid rgba(207, 214, 230, 0.5); + border-inline-end: 1px solid rgba(101, 123, 131, 0.5); font-size: .9em; padding: 3px 9px 3px 7px; margin-inline-end: 5px; @@ -1806,7 +1806,7 @@ html|span.ac-emphasize-text-url { list-style-image: url("chrome://browser/skin/reload-stop-go.png"); padding: 0 7px 0 10px; margin-inline-start: 5px; - border-inline-start: 1px solid rgba(207, 214, 230, 0.5); } + border-inline-start: 1px solid rgba(101, 123, 131, 0.5); } #urlbar-reload-button { -moz-image-region: rect(0, 14px, 14px, 0); } @@ -2016,25 +2016,25 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-textbox { -moz-appearance: none; color: #5c616c; - border: 1px solid #cfd6e6; - background-color: #ffffff; + border: 1px solid #657b83; + background-color: #fdf6e3; box-shadow: none; margin: 0; padding: 5px; width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { - border-color: #5294E2; } + border-color: #268bd2; } .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { - border-left-color: #5294E2; } + border-left-color: #268bd2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { - background-color: #FC4138; - border-color: #fb1b10; - color: #ffffff; + background-color: #dc322f; + border-color: #c22321; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { - background-color: #F27835; - border-color: #ef5f0f; - color: #ffffff; + background-color: #cb4b16; + border-color: #a63d12; + color: #fdf6e3; box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; @@ -2049,7 +2049,7 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous, .browserContainer > findbar .findbar-find-next { background: #fbfbfc; - border: 1px solid #cfd6e6; + border: 1px solid #657b83; box-shadow: none; } .browserContainer > findbar .findbar-find-previous { @@ -2063,9 +2063,9 @@ html|span.ac-emphasize-text-url { .browserContainer > findbar .findbar-find-previous:not([disabled]):active, .browserContainer > findbar .findbar-find-next:not([disabled]):active { - outline-color: rgba(255, 255, 255, 0.3); - background: #5294E2; - border-color: #5294E2; + outline-color: rgba(253, 246, 227, 0.3); + background: #268bd2; + border-color: #268bd2; box-shadow: none; } /* Tabstrip */ @@ -2460,7 +2460,7 @@ lwtHeader;*/ #TabsToolbar:not(:-moz-lwtheme) { -moz-appearance: none; color: rgba(82, 93, 118, 0.8); - background: #e7e8eb; } + background: #eee8d5; } #toolbar-menubar:not([autohide="true"]):not(:-moz-lwtheme):-moz-system-metric(menubar-drag), #TabsToolbar:not(:-moz-lwtheme):-moz-system-metric(menubar-drag) { @@ -2591,10 +2591,10 @@ toolbarbutton.chevron > .toolbarbutton-icon { .statuspanel-label { margin: 0; padding: 2px 4px; - background: #5294E2; - border: 1px none #5294E2; + background: #268bd2; + border: 1px none #268bd2; border-top-style: solid; - color: #ffffff; + color: #fdf6e3; text-shadow: none; } .statuspanel-label:-moz-locale-dir(ltr):not([mirror]), @@ -2611,9 +2611,9 @@ toolbarbutton.chevron > .toolbarbutton-icon { html|*.pointerlockfswarning { align-items: center; - color: #BAC3CF; - background: rgba(53, 57, 69, 0.95); - border: 1px solid rgba(31, 33, 40, 0.95); + color: #657b83; + background: rgba(7, 54, 66, 0.95); + border: 1px solid rgba(2, 16, 20, 0.95); box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); border-radius: 3px; padding: 24px 16px; @@ -2776,7 +2776,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-toolbarbutton[open=true], .devtools-responsiveui-toolbarbutton[checked=true] { border-color: rgba(12, 13, 14, 0.6) !important; - background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 76, 85, 0.4)); + background: linear-gradient(rgba(24, 25, 27, 0.6), rgba(41, 46, 51, 0.45) 75%, rgba(68, 77, 85, 0.4)); box-shadow: 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 3px rgba(12, 13, 14, 0.25) inset, 0 1px 0 rgba(184, 194, 204, 0.15); } .devtools-responsiveui-toolbarbutton[checked=true] { @@ -2894,7 +2894,7 @@ html|*.pointerlockfswarning-exit-button { border-radius: 25px / 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-width: 0; background-color: #353535; box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset; @@ -2904,7 +2904,7 @@ html|*.pointerlockfswarning-exit-button { .devtools-responsiveui-hardware-buttons { -moz-appearance: none; padding: 20px; - border: 1px solid #FFFFFF; + border: 1px solid #fdf6e3; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border-top-width: 0; @@ -2977,7 +2977,7 @@ html|*.pointerlockfswarning-exit-button { /* --theme-tab-toolbar-background */ --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */ - --gcli-input-focused-background: #ffffff; + --gcli-input-focused-background: #fdf6e3; /* --theme-sidebar-background */ --gcli-input-color: #393f4c; /* --theme-body-color */ -- cgit v1.2.3