diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser')
6 files changed, 93 insertions, 38 deletions
diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index 6fa9f8a..a1d5f42 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -545,7 +545,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba background-color: none; color: rgba(82, 93, 118, 0.8); border-color: rgba(82, 93, 118, 0.1); - background-color: rgba(251, 251, 252, 0.9); } + background-color: rgba(251, 251, 252, 0.9); + background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, @@ -566,7 +567,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba background: none; color: #ffffff; border-color: #5294E2; - background-color: #5294E2; } + background-color: #5294E2; + background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { background-color: var(--toolbarbutton-checkedhover-backgroundcolor); @@ -2287,14 +2289,18 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { border-color: #5294E2; } + .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { + border-left-color: #5294E2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { background-color: #FC4138; border-color: #fb1b10; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { background-color: #F27835; border-color: #ef5f0f; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; border-right-width: 0; } @@ -2316,11 +2322,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - border-color: #5294E2; + outline: 1px dashed rgba(92, 97, 108, 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: #5294E2; box-shadow: none; } diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index c8b5b68..1c6b99c 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -26,7 +26,7 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); --toolbarbutton-hover-bordercolor: $button_border; --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: $selected_bg_color; + --toolbarbutton-active-bordercolor: if($variant=='light', $selected_bg_color, $button_border); --toolbarbutton-active-background: $selected_bg_color; --toolbarbutton-checkedhover-backgroundcolor: $selected_bg_color; @@ -669,6 +669,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover > .toolbarbutton-icon { background-color: none; @include button(header-hover); + background-clip: padding-box; } //:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, @@ -696,6 +697,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon { background: none; @include button(header-active); + background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { @@ -3036,18 +3038,30 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 5px; width: 14em; - &[focused="true"] { border-color: $selected_bg_color; } + &[focused="true"] { + border-color: if($variant=='light', $selected_bg_color, $entry_border); + + @if $variant=='dark' { + box-shadow: inset 0 1px $selected_bg_color, + inset 0 -1px $selected_bg_color, + inset 1px 0 $selected_bg_color, + inset -1px 0 $selected_bg_color; + } + @if $variant=='light' { & + .findbar-find-previous { border-left-color: $selected_bg_color }} + } &[status="notfound"] { background-color: $error_color; - border-color: darken($error_color, 8%); + border-color: if($variant=='light', darken($error_color, 8%), $entry_border); color: $selected_fg_color; + box-shadow: none; } &[flash="true"] { background-color: $warning_color; - border-color: darken($warning_color, 8%); + border-color: if($variant=='light', darken($warning_color, 8%), $entry_border); color: $selected_fg_color; + box-shadow: none; } &:-moz-locale-dir(ltr) { @@ -3079,14 +3093,16 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - border-color: $selected_bg_color; + outline: 1px dashed transparentize($fg_color, 0.7); + outline-offset: -3px; box-shadow: none; } .browserContainer > findbar .findbar-find-previous:not([disabled]):active, .browserContainer > findbar .findbar-find-next:not([disabled]):active { + outline-color: transparentize($selected_fg_color, 0.7); background: $selected_bg_color; - border-color: $selected_bg_color; + border-color: if($variant=='light', $selected_bg_color, $button_border); box-shadow: none; } diff --git a/arc-firefox-theme/chrome/browser/sass/_drawing.scss b/arc-firefox-theme/chrome/browser/sass/_drawing.scss index a4f95c4..504dce1 100644 --- a/arc-firefox-theme/chrome/browser/sass/_drawing.scss +++ b/arc-firefox-theme/chrome/browser/sass/_drawing.scss @@ -24,7 +24,14 @@ // color: $fg_color; background-color: $entry_bg; - border: 1px solid $selected_bg_color; + border: 1px solid if($variant=='light', $selected_bg_color, $entry_border); + + @if $variant=='dark' { + box-shadow: inset 0 1px $selected_bg_color, + inset 0 -1px $selected_bg_color, + inset 1px 0 $selected_bg_color, + inset -1px 0 $selected_bg_color; + } } @if $t==insensitive { @@ -68,7 +75,7 @@ // color: $selected_fg_color; background-color: $selected_bg_color; - border: 1px solid $selected_bg_color; + border: 1px solid if($variant=='light', $selected_bg_color, $button_border); } @else if $t==insensitive { @@ -103,7 +110,7 @@ // pushed header-bar button // color: $selected_fg_color; - border-color: $selected_bg_color; + border-color: if($variant=='light' and $darker=='false', $selected_bg_color, $header_button_border); background-color: $selected_bg_color; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index 6f0988f..02d74f2 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -10,7 +10,7 @@ --toolbarbutton-hover-boxshadow: none; --toolbarbutton-hover-bordercolor: #2b2e39; --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: #5294E2; + --toolbarbutton-active-bordercolor: #2b2e39; --toolbarbutton-active-background: #5294E2; --toolbarbutton-checkedhover-backgroundcolor: #5294E2; --toolbarbutton-combined-boxshadow: none; @@ -144,7 +144,7 @@ toolbarbutton.bookmark-item:not([disabled=true]):-moz-any([open], [checked], :ho -moz-appearance: none; color: #ffffff; background-color: #5294E2; - border: 1px solid #5294E2; } + border: 1px solid #2b2e39; } /* ----- BOOKMARK STAR ANIMATION ----- */ @keyframes animation-bookmarkAdded { @@ -545,7 +545,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba 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); } + background-color: rgba(95, 105, 127, 0.37); + background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, @@ -565,8 +566,9 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; - border-color: #5294E2; - background-color: #5294E2; } + border-color: rgba(21, 23, 28, 0.37); + background-color: #5294E2; + background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { background-color: var(--toolbarbutton-checkedhover-backgroundcolor); @@ -1286,7 +1288,8 @@ toolbar[brighttext] #loop-button > .toolbarbutton-badge-container { .searchbar-textbox[focused] { color: #D3DAE3; background-color: #404552; - border: 1px solid #5294E2; } + border: 1px solid #2b2e39; + box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; } .searchbar-textbox { border-radius: 20px; } @@ -2286,15 +2289,18 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- padding: 5px; width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { - border-color: #5294E2; } + border-color: #2b2e39; + box-shadow: inset 0 1px #5294E2, inset 0 -1px #5294E2, inset 1px 0 #5294E2, inset -1px 0 #5294E2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { background-color: #FC4138; - border-color: #fb1b10; - color: #ffffff; } + border-color: #2b2e39; + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { background-color: #F27835; - border-color: #ef5f0f; - color: #ffffff; } + border-color: #2b2e39; + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; border-right-width: 0; } @@ -2316,13 +2322,15 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - border-color: #5294E2; + outline: 1px dashed rgba(211, 218, 227, 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: #5294E2; + border-color: #2b2e39; box-shadow: none; } /* Tabstrip */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index d854633..6cbb380 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -545,7 +545,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba 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); } + background-color: rgba(95, 105, 127, 0.37); + background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, @@ -565,8 +566,9 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba #TabsToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-icon { background: none; color: #ffffff; - border-color: #5294E2; - background-color: #5294E2; } + border-color: rgba(21, 23, 28, 0.37); + background-color: #5294E2; + background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { background-color: var(--toolbarbutton-checkedhover-backgroundcolor); @@ -2287,14 +2289,18 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { border-color: #5294E2; } + .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { + border-left-color: #5294E2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { background-color: #FC4138; border-color: #fb1b10; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { background-color: #F27835; border-color: #ef5f0f; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; border-right-width: 0; } @@ -2316,11 +2322,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - border-color: #5294E2; + outline: 1px dashed rgba(92, 97, 108, 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: #5294E2; box-shadow: none; } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index 6fa9f8a..a1d5f42 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -545,7 +545,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba background-color: none; color: rgba(82, 93, 118, 0.8); border-color: rgba(82, 93, 118, 0.1); - background-color: rgba(251, 251, 252, 0.9); } + background-color: rgba(251, 251, 252, 0.9); + background-clip: padding-box; } .findbar-button:not([disabled=true]):-moz-any([checked="true"], :hover:active) > .toolbarbutton-text, :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon, @@ -566,7 +567,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba background: none; color: #ffffff; border-color: #5294E2; - background-color: #5294E2; } + background-color: #5294E2; + background-clip: padding-box; } :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon { background-color: var(--toolbarbutton-checkedhover-backgroundcolor); @@ -2287,14 +2289,18 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- width: 14em; } .browserContainer > findbar .findbar-textbox[focused="true"] { border-color: #5294E2; } + .browserContainer > findbar .findbar-textbox[focused="true"] + .findbar-find-previous { + border-left-color: #5294E2; } .browserContainer > findbar .findbar-textbox[status="notfound"] { background-color: #FC4138; border-color: #fb1b10; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox[flash="true"] { background-color: #F27835; border-color: #ef5f0f; - color: #ffffff; } + color: #ffffff; + box-shadow: none; } .browserContainer > findbar .findbar-textbox:-moz-locale-dir(ltr) { border-radius: 3px 0 0 3px; border-right-width: 0; } @@ -2316,11 +2322,13 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- .browserContainer > findbar .findbar-find-previous:focus, .browserContainer > findbar .findbar-find-next:focus { - border-color: #5294E2; + outline: 1px dashed rgba(92, 97, 108, 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: #5294E2; box-shadow: none; } |