mirror of
https://github.com/Codennnn/vue-color-avatar.git
synced 2024-12-22 20:22:39 +00:00
feat: add gradient bg-color
This commit is contained in:
parent
3a3f4db9db
commit
3c41dee55e
@ -96,11 +96,8 @@ onUnmounted(() => {
|
|||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
@supports (backdrop-filter: blur(0.1rem)) {
|
|
||||||
backdrop-filter: blur(0.1rem);
|
backdrop-filter: blur(0.1rem);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.code-box {
|
.code-box {
|
||||||
$code-header-height: 4rem;
|
$code-header-height: 4rem;
|
||||||
|
@ -166,7 +166,6 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
|
|||||||
width: $layout-sider-width;
|
width: $layout-sider-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $color-configurator;
|
background-color: $color-configurator;
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.configurator {
|
.configurator {
|
||||||
@ -209,7 +208,10 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.bg-color-list__item {
|
.bg-color-list__item {
|
||||||
padding: 0.4rem 0.5rem;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.6rem 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s;
|
transition: transform 0.2s;
|
||||||
|
|
||||||
@ -229,7 +231,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: inherit;
|
background: inherit;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
@ -241,6 +243,7 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
z-index: 1;
|
||||||
color: $color-configurator;
|
color: $color-configurator;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
transform: translate(-50%, -50%) scale(0.5);
|
transform: translate(-50%, -50%) scale(0.5);
|
||||||
|
@ -49,9 +49,12 @@ const { t } = useI18n()
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: rgba($color-dark, 0.4);
|
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0);
|
||||||
backdrop-filter: blur(0.3rem);
|
backdrop-filter: blur(0.3rem);
|
||||||
|
|
||||||
|
@supports not (backdrop-filter: blur(0.3rem)) {
|
||||||
|
background-color: rgba($color-dark, 0.8);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.download-modal {
|
.download-modal {
|
||||||
|
@ -72,8 +72,6 @@ export const SETTINGS: Readonly<AvatarSettings> = {
|
|||||||
clothesShape: Object.values(ClothesShape),
|
clothesShape: Object.values(ClothesShape),
|
||||||
|
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
'#EEE',
|
|
||||||
'#9287FF',
|
|
||||||
'#6BD9E9',
|
'#6BD9E9',
|
||||||
'#FC909F',
|
'#FC909F',
|
||||||
'#F4D150',
|
'#F4D150',
|
||||||
@ -83,7 +81,11 @@ export const SETTINGS: Readonly<AvatarSettings> = {
|
|||||||
'#FFEBA4',
|
'#FFEBA4',
|
||||||
'#506AF4',
|
'#506AF4',
|
||||||
'#F48150',
|
'#F48150',
|
||||||
'#74D153',
|
'linear-gradient(45deg, #E3648C, #D97567)',
|
||||||
|
'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
|
||||||
|
'linear-gradient(90deg, #ffecd2, #fcb69f)',
|
||||||
|
'linear-gradient(120deg, #a1c4fd, #c2e9fb)',
|
||||||
|
'linear-gradient(-135deg, #fccb90, #d57eeb)',
|
||||||
],
|
],
|
||||||
skinColor: ['#F9C9B6', '#AC6651'],
|
skinColor: ['#F9C9B6', '#AC6651'],
|
||||||
clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],
|
clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],
|
||||||
|
@ -136,7 +136,7 @@ export function showConfetti() {
|
|||||||
|
|
||||||
const duration = performance.now() + 1 * 1000
|
const duration = performance.now() + 1 * 1000
|
||||||
|
|
||||||
const colors = SETTINGS.backgroundColor.slice(1, 4)
|
const colors = ['#6967fe', '#85e9f4', '#e16984']
|
||||||
|
|
||||||
void (function frame() {
|
void (function frame() {
|
||||||
myConfetti({
|
myConfetti({
|
||||||
|
Loading…
Reference in New Issue
Block a user