update
This commit is contained in:
vee
@@ -89,11 +89,245 @@
|
||||
.console-v2[data-module="self-extension"] .v2-self-extension {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
grid-row: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.v2-extension-pet {
|
||||
--pet-x: 0px;
|
||||
--pet-y: 0px;
|
||||
width: 126px;
|
||||
height: 126px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 16px;
|
||||
z-index: 24;
|
||||
display: grid;
|
||||
place-items: end center;
|
||||
transform: translate3d(var(--pet-x), var(--pet-y), 0);
|
||||
filter: drop-shadow(0 14px 16px rgba(9, 66, 63, 0.2));
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.v2-extension-pet-bubble {
|
||||
max-width: 158px;
|
||||
position: absolute;
|
||||
right: 54px;
|
||||
bottom: 89px;
|
||||
padding: 7px 9px;
|
||||
color: #285153;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 1px solid rgba(14, 119, 115, 0.18);
|
||||
border-radius: 11px 11px 2px 11px;
|
||||
box-shadow: 0 9px 24px rgba(22, 72, 70, 0.12);
|
||||
font-size: 8px;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
opacity: 0;
|
||||
transform: translateY(5px) scale(0.96);
|
||||
transform-origin: right bottom;
|
||||
transition: 170ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.v2-extension-pet:hover .v2-extension-pet-bubble,
|
||||
.v2-extension-pet[data-mood="talking"] .v2-extension-pet-bubble,
|
||||
.v2-extension-pet[data-mood="happy"] .v2-extension-pet-bubble {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.v2-extension-pet-body {
|
||||
width: 76px;
|
||||
height: 77px;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background: linear-gradient(145deg, #f4fffd 0%, #bfe9e5 54%, #7bc3bd 100%);
|
||||
border: 2px solid rgba(7, 86, 82, 0.48);
|
||||
border-radius: 25px 25px 22px 22px;
|
||||
box-shadow:
|
||||
inset 0 3px 0 rgba(255, 255, 255, 0.82),
|
||||
inset 0 -6px 12px rgba(9, 93, 89, 0.13),
|
||||
0 6px 0 #326f6c;
|
||||
cursor: grab;
|
||||
animation: extension-pet-float 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.v2-extension-pet[data-dragging="true"] .v2-extension-pet-body {
|
||||
cursor: grabbing;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.v2-extension-pet-ear {
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
z-index: -1;
|
||||
background: linear-gradient(145deg, #dff8f5, #75bbb6);
|
||||
border: 2px solid rgba(7, 86, 82, 0.48);
|
||||
border-radius: 7px 15px 5px 13px;
|
||||
}
|
||||
|
||||
.v2-extension-pet-ear.left { left: 3px; transform: rotate(-20deg); }
|
||||
.v2-extension-pet-ear.right { right: 3px; transform: scaleX(-1) rotate(-20deg); }
|
||||
|
||||
.v2-extension-pet-antenna {
|
||||
width: 2px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
top: -21px;
|
||||
left: 50%;
|
||||
background: #397f7b;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.v2-extension-pet-antenna i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -3px;
|
||||
background: #ffbd62;
|
||||
border: 1px solid #9f6630;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 4px rgba(255, 189, 98, 0.17);
|
||||
animation: extension-pet-signal 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.v2-extension-pet-face {
|
||||
width: 58px;
|
||||
height: 34px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 7px;
|
||||
background: linear-gradient(180deg, #164e50, #0d383a);
|
||||
border: 2px solid rgba(255, 255, 255, 0.65);
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.v2-extension-pet-face .eye {
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
background: #bdfaf2;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 7px rgba(141, 255, 241, 0.72);
|
||||
animation: extension-pet-blink 4.6s infinite;
|
||||
}
|
||||
|
||||
.v2-extension-pet-face .eye.left { left: 12px; }
|
||||
.v2-extension-pet-face .eye.right { right: 12px; }
|
||||
|
||||
.v2-extension-pet-face b {
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 50%;
|
||||
background: #ffc17a;
|
||||
border-radius: 50% 50% 65% 65%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.v2-extension-pet-face em {
|
||||
width: 13px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
left: 50%;
|
||||
border-bottom: 2px solid #bdfaf2;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.v2-extension-pet[data-mood="happy"] .v2-extension-pet-face .eye {
|
||||
height: 5px;
|
||||
top: 13px;
|
||||
background: transparent;
|
||||
border-top: 2px solid #bdfaf2;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.v2-extension-pet-screen {
|
||||
width: 36px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
left: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: #eafffb;
|
||||
background: #277c78;
|
||||
border: 1px solid rgba(6, 79, 75, 0.5);
|
||||
border-radius: 7px;
|
||||
font: 900 6px Consolas, monospace;
|
||||
}
|
||||
|
||||
.v2-extension-pet-screen i {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #80f0bd;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 5px rgba(128, 240, 189, 0.8);
|
||||
}
|
||||
|
||||
.v2-extension-pet-foot {
|
||||
width: 21px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
background: #5ba5a0;
|
||||
border: 2px solid #326f6c;
|
||||
border-radius: 4px 4px 9px 9px;
|
||||
}
|
||||
|
||||
.v2-extension-pet-foot.left { left: 8px; }
|
||||
.v2-extension-pet-foot.right { right: 8px; }
|
||||
|
||||
.v2-extension-pet-tail {
|
||||
width: 27px;
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
right: -21px;
|
||||
bottom: 12px;
|
||||
z-index: -1;
|
||||
border: 5px solid #4d9994;
|
||||
border-left: 0;
|
||||
border-radius: 0 13px 13px 0;
|
||||
transform-origin: left center;
|
||||
animation: extension-pet-tail 1.1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes extension-pet-float {
|
||||
0%, 100% { transform: translateY(0) rotate(-1deg); }
|
||||
50% { transform: translateY(-5px) rotate(1deg); }
|
||||
}
|
||||
|
||||
@keyframes extension-pet-blink {
|
||||
0%, 45%, 49%, 100% { transform: scaleY(1); }
|
||||
47% { transform: scaleY(0.12); }
|
||||
}
|
||||
|
||||
@keyframes extension-pet-signal {
|
||||
0%, 100% { opacity: 0.72; transform: scale(0.86); }
|
||||
50% { opacity: 1; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
@keyframes extension-pet-tail {
|
||||
from { transform: rotate(-14deg); }
|
||||
to { transform: rotate(16deg); }
|
||||
}
|
||||
|
||||
.v2-extension-sidebar > .v2-field-caption {
|
||||
display: block;
|
||||
margin: 0 0 8px;
|
||||
|
||||
Reference in New Issue
Block a user