From f01b2fe4a36e3c6b945a62862a9cf7f9472d5aba Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sat, 7 Oct 2023 20:55:23 +0800 Subject: more browser for blur effect is featured --- src/css/ghrepo.css | 28 +++++++++++++++++++++++++--- src/css/style.css | 18 +++++++++++++++++- 2 files changed, 42 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css index 54f67dd5..acdcb6fe 100644 --- a/src/css/ghrepo.css +++ b/src/css/ghrepo.css @@ -190,7 +190,10 @@ input:hover, .filter-repos:hover { /* background: rgba(10, 10, 15, 0.5); */ transition: all 0.5s; - -webkit-backdrop-filter: blur(5px); + -moz-filter: blur(5px); + -o-filter: blur(5px); + -ms-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 50mm rgba(0,0,0,.7); transform: scale(1.1); @@ -209,8 +212,11 @@ input:active, flex-wrap: wrap; justify-content: center; background: rgba(128, 128, 128, 0.2); - /* -webkit-backdrop-filter: blur(2px); */ - /* backdrop-filter: blur(2px); */ + /* backdrop-filter: -webkit-filter: blur(32px); + -moz-filter: blur(32px); + -o-filter: blur(32px); + -ms-filter: blur(32px); + blur(2px); */ margin-top: 0; padding: 2em; /* border-bottom-left-radius: 20px; */ @@ -254,6 +260,10 @@ h3 { padding: 1em; text-align: center; background: transparent; + -webkit-filter: blur(20px); + -moz-filter: blur(20px); + -o-filter: blur(20px); + -ms-filter: blur(20px); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-transition: all 0.5s @@ -302,6 +312,10 @@ h3 { .intro:hover, .user-info:hover { + -webkit-filter: blur(8px); + -moz-filter: blur(8px); + -o-filter: blur(8px); + -ms-filter: blur(8px); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: scale(1.1); @@ -311,6 +325,10 @@ h3 { .user-info { /* background: transparent; */ background: rgba(128, 128, 128, 0.2); + -webkit-filter: blur(2px); + -moz-filter: blur(2px); + -o-filter: blur(2px); + -ms-filter: blur(2px); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */ @@ -334,6 +352,10 @@ h3 { } .repo { + -webkit-filter: blur(20px); + -moz-filter: blur(20px); + -o-filter: blur(20px); + -ms-filter: blur(20px); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 10mm rgba(0,0,0,.7); diff --git a/src/css/style.css b/src/css/style.css index 880a4199..f027cbf2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -34,6 +34,10 @@ body { left: 0; } +body::-webkit-scrollbar { + display: none; +} + /* animation ============================================== */ @keyframes slideInTop { @@ -84,6 +88,8 @@ body { -moz-filter: blur(32px); -o-filter: blur(32px); -ms-filter: blur(32px); + -webkit-backdrop-filter: blur(32px); + backdrop-filter: blur(32px); transform: scale(2); } 100% { @@ -91,6 +97,8 @@ body { -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); + -webkit-backdrop-filter: blur(0px); + backdrop-filter: blur(0px); transform: scale(1); } } @@ -218,6 +226,10 @@ header { .navBar a:hover { /* background: rgba(255, 255, 255, 0.2); */ /* outline: ridge rgba(128, 128, 128, .6); */ + -webkit-filter: blur(5px); + -moz-filter: blur(5px); + -o-filter: blur(5px); + -ms-filter: blur(5px); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: all 1s @@ -243,9 +255,13 @@ header:hover, #navBarHeader:active { transform: scale(1.005); + -webkit-filter: blur(5px); + -moz-filter: blur(5px); + -o-filter: blur(5px); + -ms-filter: blur(5px); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); - transition: all 0.5s +transition: all 0.5s } /* other ================================================== */ -- cgit v1.2.3