From fb780b48c3a29ae4243c3b899dcafe1b3ee0a766 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 7 Mar 2016 14:57:34 +0100 Subject: style fullscreen message --- arc-firefox-theme/chrome/browser/browser.css | 25 ++++++++++++--- .../chrome/browser/sass/_browser-sass.scss | 17 +++++++--- .../chrome/browser/sass/_drawing.scss | 36 ++++++++++++++++++++++ .../chrome/browser/sass/browser-dark.css | 25 ++++++++++++--- .../chrome/browser/sass/browser-darker.css | 25 ++++++++++++--- .../chrome/browser/sass/browser-light.css | 25 ++++++++++++--- 6 files changed, 129 insertions(+), 24 deletions(-) diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index dabd4cb..6d10c0e 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -2755,10 +2755,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { 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; + color: #BAC3CF; + background: rgba(53, 57, 69, 0.95); + border: 1px solid rgba(31, 33, 40, 0.95); + box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); + border-radius: 3px; padding: 24px 16px; font: message-box; } @@ -2791,7 +2792,21 @@ html|*#fullscreen-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; } + box-sizing: content-box; + background-clip: padding-box; + border: 1px solid; + border-radius: 3px; + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(102, 109, 132, 0.35); } + html|*#fullscreen-exit-button:hover { + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + html|*#fullscreen-exit-button:active, html|*#fullscreen-exit-button:checked { + color: #ffffff; + border-color: rgba(26, 28, 34, 0.35); + background-color: #5294E2; } /* Responsive Mode */ .browserContainer[responsivemode] { diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index 3757954..eb7726c 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -3699,10 +3699,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { 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; + color: $dark_sidebar_fg; + background: $dark_sidebar_bg; + border: 1px solid darken($dark_sidebar_bg, 10%); + box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); + border-radius: 3px; padding: 24px 16px; font: message-box; } @@ -3741,6 +3742,14 @@ html|*#fullscreen-exit-button { font-weight: lighter; margin: 0; box-sizing: content-box; + background-clip: padding-box; + border: 1px solid; + border-radius: 3px; + + @include button(osd); + + &:hover { @include button(osd-hover); } + &:active, &:checked { @include button(osd-active); } } /* Responsive Mode */ diff --git a/arc-firefox-theme/chrome/browser/sass/_drawing.scss b/arc-firefox-theme/chrome/browser/sass/_drawing.scss index 504dce1..06f32bf 100644 --- a/arc-firefox-theme/chrome/browser/sass/_drawing.scss +++ b/arc-firefox-theme/chrome/browser/sass/_drawing.scss @@ -133,4 +133,40 @@ border-color: transparentize($selected_bg_color, 0.35); background-color: transparentize($selected_bg_color, 0.35); } + + @else if $t==osd { + // + // normal osd button + // + color: $osd_fg_color; + border-color: $osd_button_border; + background-color: $osd_button_bg; + } + + @else if $t==osd-hover { + // + // active osd button + // + color: $osd_fg_color; + border-color: $osd_button_border; + background-color: opacify(lighten($osd_button_bg, 7%), 0.1); + } + + @else if $t==osd-active { + // + // active osd button + // + color: $selected_fg_color; + border-color: $osd_button_border; + background-color: $selected_bg_color; + } + + @else if $t==osd-insensitive { + // + // insensitive osd button + // + color: $osd_insensitive_fg_color; + border-color: $osd_button_border; + background-color: transparentize($osd_button_bg, 0.15); + } } diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index fa16d69..c43bb01 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -2755,10 +2755,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { 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; + color: #BAC3CF; + background: rgba(53, 57, 69, 0.95); + border: 1px solid rgba(31, 33, 40, 0.95); + box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); + border-radius: 3px; padding: 24px 16px; font: message-box; } @@ -2791,7 +2792,21 @@ html|*#fullscreen-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; } + box-sizing: content-box; + background-clip: padding-box; + border: 1px solid; + border-radius: 3px; + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(102, 109, 132, 0.35); } + html|*#fullscreen-exit-button:hover { + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + html|*#fullscreen-exit-button:active, html|*#fullscreen-exit-button:checked { + color: #ffffff; + border-color: rgba(26, 28, 34, 0.35); + background-color: #5294E2; } /* Responsive Mode */ .browserContainer[responsivemode] { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index a3f4850..c7d0e50 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -2755,10 +2755,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { 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; + color: #BAC3CF; + background: rgba(53, 57, 69, 0.95); + border: 1px solid rgba(31, 33, 40, 0.95); + box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); + border-radius: 3px; padding: 24px 16px; font: message-box; } @@ -2791,7 +2792,21 @@ html|*#fullscreen-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; } + box-sizing: content-box; + background-clip: padding-box; + border: 1px solid; + border-radius: 3px; + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(102, 109, 132, 0.35); } + html|*#fullscreen-exit-button:hover { + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + html|*#fullscreen-exit-button:active, html|*#fullscreen-exit-button:checked { + color: #ffffff; + border-color: rgba(26, 28, 34, 0.35); + background-color: #5294E2; } /* Responsive Mode */ .browserContainer[responsivemode] { diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index dabd4cb..6d10c0e 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -2755,10 +2755,11 @@ toolbarbutton.chevron > .toolbarbutton-icon { 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; + color: #BAC3CF; + background: rgba(53, 57, 69, 0.95); + border: 1px solid rgba(31, 33, 40, 0.95); + box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); + border-radius: 3px; padding: 24px 16px; font: message-box; } @@ -2791,7 +2792,21 @@ html|*#fullscreen-exit-button { font-size: 14px; font-weight: lighter; margin: 0; - box-sizing: content-box; } + box-sizing: content-box; + background-clip: padding-box; + border: 1px solid; + border-radius: 3px; + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(102, 109, 132, 0.35); } + html|*#fullscreen-exit-button:hover { + color: #BAC3CF; + border-color: rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + html|*#fullscreen-exit-button:active, html|*#fullscreen-exit-button:checked { + color: #ffffff; + border-color: rgba(26, 28, 34, 0.35); + background-color: #5294E2; } /* Responsive Mode */ .browserContainer[responsivemode] { -- cgit v1.2.3