mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add scroll animations for transparent mode (#4996)
This commit is contained in:
parent
c1d1b85bf5
commit
e2ec33f1f4
@ -74,6 +74,7 @@ export default Vue.extend({
|
||||
|
||||
<style lang="scss">
|
||||
@import 'common';
|
||||
@import './scroll-animation';
|
||||
|
||||
.van-message-box {
|
||||
z-index: 10002 !important;
|
||||
|
||||
@ -0,0 +1,183 @@
|
||||
@property --navbar-foreground {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
@property --navbar-background {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
@property --foreground-color-d {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
@property --theme-color {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
@property --theme-color-60 {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@keyframes transparent-to-light {
|
||||
to {
|
||||
--navbar-foreground: #555;
|
||||
--navbar-background: white;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-light-blur {
|
||||
to {
|
||||
--navbar-foreground: #555;
|
||||
--navbar-background: #fffc;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-dark {
|
||||
to {
|
||||
--navbar-foreground: #eee;
|
||||
--navbar-background: #222;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-dark-blur {
|
||||
to {
|
||||
--navbar-foreground: #eee;
|
||||
--navbar-background: #2228;
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-theme {
|
||||
to {
|
||||
--navbar-foreground: var(--foreground-color-d);
|
||||
--navbar-background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-theme-blur {
|
||||
to {
|
||||
--navbar-foreground: var(--foreground-color-d);
|
||||
--navbar-background: var(--theme-color-60);
|
||||
backdrop-filter: blur(24px);
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-light-shadow {
|
||||
to {
|
||||
--navbar-foreground: #555;
|
||||
--navbar-background: white;
|
||||
box-shadow: #0002 0 1px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-light-blur-shadow {
|
||||
to {
|
||||
--navbar-foreground: #555;
|
||||
--navbar-background: #fffc;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: #0002 0 1px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-dark-shadow {
|
||||
to {
|
||||
--navbar-foreground: #eee;
|
||||
--navbar-background: #222;
|
||||
box-shadow: #0004 0px 2px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-dark-blur-shadow {
|
||||
to {
|
||||
--navbar-foreground: #eee;
|
||||
--navbar-background: #2228;
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: #0004 0px 2px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-theme-shadow {
|
||||
to {
|
||||
--navbar-foreground: var(--foreground-color-d);
|
||||
--navbar-background: var(--theme-color);
|
||||
box-shadow: #0002 0 1px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-to-theme-blur-shadow {
|
||||
to {
|
||||
--navbar-foreground: var(--foreground-color-d);
|
||||
--navbar-background: var(--theme-color-60);
|
||||
backdrop-filter: blur(24px);
|
||||
box-shadow: #0002 0 1px 10px 1px;
|
||||
}
|
||||
}
|
||||
@keyframes transparent-mask {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes launch-bar-colors {
|
||||
to {
|
||||
background-color: #8883;
|
||||
}
|
||||
}
|
||||
@keyframes launch-bar-colors-fill {
|
||||
to {
|
||||
background-color: #0002;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (animation-timeline: scroll()) {
|
||||
.custom-navbar.transparent {
|
||||
--animation-range: clamp(116px, 7vw, 180px) clamp(155px, 9.375vw, 240px);
|
||||
&::before {
|
||||
animation: transparent-mask linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: var(--animation-range);
|
||||
}
|
||||
body.fixed-navbar & {
|
||||
animation: transparent-to-light linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: var(--animation-range);
|
||||
.launch-bar {
|
||||
animation: launch-bar-colors linear both;
|
||||
animation-timeline: scroll();
|
||||
animation-range: var(--animation-range);
|
||||
}
|
||||
&.shadow {
|
||||
animation-name: transparent-to-light-shadow;
|
||||
}
|
||||
&.blur:not(.fill) {
|
||||
animation-name: transparent-to-light-blur;
|
||||
&.shadow {
|
||||
animation-name: transparent-to-light-blur-shadow;
|
||||
}
|
||||
}
|
||||
&.fill {
|
||||
animation-name: transparent-to-theme;
|
||||
|
||||
.launch-bar {
|
||||
animation-name: launch-bar-colors-fill;
|
||||
}
|
||||
&.shadow {
|
||||
animation-name: transparent-to-theme-shadow;
|
||||
}
|
||||
&.blur {
|
||||
animation-name: transparent-to-theme-blur;
|
||||
&.shadow {
|
||||
animation-name: transparent-to-theme-blur-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
body.fixed-navbar.dark &:not(.fill) {
|
||||
animation-name: transparent-to-dark;
|
||||
&.shadow {
|
||||
animation-name: transparent-to-dark-shadow;
|
||||
}
|
||||
&.blur {
|
||||
animation-name: transparent-to-dark-blur;
|
||||
&.shadow {
|
||||
animation-name: transparent-to-dark-blur-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user