优化样式细节 🍊

This commit is contained in:
Han 2025-03-03 15:55:47 +08:00
parent c42d820a69
commit b8597a0724
16 changed files with 84 additions and 71 deletions

View File

@ -5,7 +5,7 @@
box-sizing: border-box; box-sizing: border-box;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
width: 100%; width: 100%;
min-height: 5.5rem; min-height: 5.5rem;

View File

@ -3,7 +3,7 @@ section.vh-container {
flex: 1; flex: 1;
padding: 2rem 1rem; padding: 2rem 1rem;
border-radius: 1rem; border-radius: 1rem;
background: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
&>.archive-list { &>.archive-list {
@ -29,7 +29,7 @@ section.vh-container {
&:not(.title) { &:not(.title) {
&:hover { &:hover {
background: #F5F6F8; background-color: var(--vh-color-default-88);
&>i { &>i {
&::before { &::before {
@ -55,7 +55,7 @@ section.vh-container {
height: 0.25rem; height: 0.25rem;
border: none; border: none;
border-radius: 0.25rem; border-radius: 0.25rem;
background: #4E667F; background-color: #4E667F;
} }
&::after { &::after {
@ -106,7 +106,7 @@ section.vh-container {
height: 0.36rem; height: 0.36rem;
border: solid 0.28rem #0000006D; border: solid 0.28rem #0000006D;
border-radius: 50%; border-radius: 50%;
background: #fff; background-color: #fff;
transition: all .3s; transition: all .3s;
} }
} }
@ -163,7 +163,7 @@ section.vh-container {
section.vh-container { section.vh-container {
&>section.vh-archive-main { &>section.vh-archive-main {
padding: 0; padding: 0;
background: transparent; background-color: transparent;
&>.archive-list { &>.archive-list {
&>.archive-list-item { &>.archive-list-item {

View File

@ -11,7 +11,7 @@ section.vh-container {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: max-content; height: max-content;
background: #fff; background-color: #fff;
border-top-left-radius: 0.5rem; border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem; border-top-right-radius: 0.5rem;
box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05);
@ -64,7 +64,7 @@ section.vh-container {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: max-content; height: max-content;
background: #fff; background-color: #fff;
border-bottom-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem;
box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05);
@ -90,11 +90,11 @@ section.vh-container {
width: max-content; width: max-content;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 1rem; border-radius: 1rem;
background-color: #F5F6F8; background-color: var(--vh-color-default-88);
transition: background 0.16s ease-in-out, transform 0.16s ease-in-out; transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
&:hover { &:hover {
background-color: #EEEFF3; background-color: var(--vh-color-default);
transform: translateY(-0.18rem); transform: translateY(-0.18rem);
} }
@ -205,7 +205,7 @@ section.vh-container {
// 其下面的code标签样式 // 其下面的code标签样式
code { code {
background-color: #edeef3; background-color: var(--vh-color-default);
padding: .125rem .375rem; padding: .125rem .375rem;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
@ -224,7 +224,7 @@ section.vh-container {
padding: 0.188rem 0.58rem; padding: 0.188rem 0.58rem;
border-left: 5px solid #eee; border-left: 5px solid #eee;
border-left-color: #929292; border-left-color: #929292;
background: #f3f5f7; background-color: #f3f5f7;
&>p { &>p {
font-size: 0.875rem; font-size: 0.875rem;
@ -240,7 +240,7 @@ section.vh-container {
// border-collapse: collapse; // border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
font-size: 0.9rem; font-size: 0.9rem;
background: #fff; background-color: #fff;
border: 1px solid #EEEEEE; border: 1px solid #EEEEEE;
border-radius: 0.38rem; border-radius: 0.38rem;
overflow: hidden; overflow: hidden;
@ -306,40 +306,40 @@ section.vh-container {
border-left: 5px solid #eee; border-left: 5px solid #eee;
border-left-color: #777; border-left-color: #777;
border-radius: 3px; border-radius: 3px;
background: #f7f7f7; background-color: #f7f7f7;
&.note-success { &.note-success {
border-color: #01C4B6; border-color: #01C4B6;
border-left: 5px solid #01C4B6; border-left: 5px solid #01C4B6;
border-left-color: #01C4B6; border-left-color: #01C4B6;
background: #01C4B618; background-color: #01C4B618;
} }
&.note-info { &.note-info {
border-color: #3253b4; border-color: #3253b4;
border-left: 5px solid #3253b4; border-left: 5px solid #3253b4;
border-left-color: #3253b4; border-left-color: #3253b4;
background: #3253b418; background-color: #3253b418;
} }
&.note-warning { &.note-warning {
border-color: #DD8636; border-color: #DD8636;
border-left: 5px solid #DD8636; border-left: 5px solid #DD8636;
border-left-color: #DD8636; border-left-color: #DD8636;
background: #DD863618; background-color: #DD863618;
} }
&.note-error { &.note-error {
border-color: #DE3C3D; border-color: #DE3C3D;
border-left: 5px solid #DE3C3D; border-left: 5px solid #DE3C3D;
border-left-color: #DE3C3D; border-left-color: #DE3C3D;
background: #DE3C3D18; background-color: #DE3C3D18;
} }
&.note-import { &.note-import {
border-left: 5px solid #B984DF; border-left: 5px solid #B984DF;
border-left-color: #B984DF; border-left-color: #B984DF;
background: #B984DF18; background-color: #B984DF18;
} }
p { p {
@ -362,7 +362,7 @@ section.vh-container {
height: 2.28rem; height: 2.28rem;
border: solid 1px #333; border: solid 1px #333;
border-radius: 0.28rem; border-radius: 0.28rem;
background: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
transition: background-color 0.18s ease-in-out; transition: background-color 0.18s ease-in-out;
z-index: 1; z-index: 1;
@ -394,7 +394,7 @@ section.vh-container {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 0; height: 0;
background: #EDEEF366; background-color: var(--vh-color-default-66);
transition: height 0.16s ease-in-out; transition: height 0.16s ease-in-out;
z-index: -1; z-index: -1;
} }
@ -623,7 +623,7 @@ section.vh-container {
border-radius: 0.618rem; border-radius: 0.618rem;
height: max-content; height: max-content;
max-height: 888px; max-height: 888px;
background: #EDEEF399 !important; background-color: var(--vh-color-default-99) !important;
code { code {
box-sizing: border-box; box-sizing: border-box;
@ -660,10 +660,10 @@ section.vh-container {
.os-theme-dark.os-scrollbar { .os-theme-dark.os-scrollbar {
&>.os-scrollbar-track { &>.os-scrollbar-track {
&>.os-scrollbar-handle { &>.os-scrollbar-handle {
background: #A3A8AF88; background-color: #A3A8AF88;
&:hover { &:hover {
background: #A3A8AF66; background-color: #A3A8AF66;
} }
} }
} }

View File

@ -1,6 +1,11 @@
@import url('/assets/font/index.css'); @import url('/assets/font/index.css');
:root { :root {
// 颜色
--vh-color-default: #EDEEF3;
--vh-color-default-66: #EDEEF366;
--vh-color-default-88: #EDEEF388;
--vh-color-default-99: #EDEEF399;
--vh-padding-top: calc(66px + 1rem); --vh-padding-top: calc(66px + 1rem);
--vh-main-max-width: 1388px; --vh-main-max-width: 1388px;
--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem); --vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
@ -94,7 +99,7 @@ html {
width: 100%; width: 100%;
height: max-content; height: max-content;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;
@ -164,12 +169,12 @@ html.is-animating {
overflow: hidden; overflow: hidden;
&.white { &.white {
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
} }
&>span { &>span {
background: #000; background-color: #000;
position: relative; position: relative;
width: 5px; width: 5px;
height: 5px; height: 5px;
@ -210,7 +215,7 @@ html.is-animating {
padding: 0.75rem; padding: 0.75rem;
margin-top: 1rem; margin-top: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;

View File

@ -7,7 +7,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: max-content; height: max-content;
background: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: saturate(100%) blur(2px); backdrop-filter: saturate(100%) blur(2px);
user-select: none; user-select: none;
@ -39,7 +39,7 @@
align-items: center; align-items: center;
width: max-content; width: max-content;
height: 1.25rem; height: 1.25rem;
background: #25C2A0; background-color: #25C2A0;
font-size: 0.68rem; font-size: 0.68rem;
border-radius: 0.18rem; border-radius: 0.18rem;
overflow: hidden; overflow: hidden;
@ -60,7 +60,7 @@
} }
&>em { &>em {
background: #5D5D5D; background-color: #5D5D5D;
} }
&>svg { &>svg {

View File

@ -9,7 +9,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1rem; gap: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;
min-height: 5.5rem; min-height: 5.5rem;
@ -29,7 +29,7 @@
z-index: 1; z-index: 1;
&:hover { &:hover {
background: #EDEEF3; background-color: var(--vh-color-default);
&>.avatar { &>.avatar {
transform: scale(1.2) rotate(8deg); transform: scale(1.2) rotate(8deg);

View File

@ -15,7 +15,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;
@ -27,6 +27,7 @@
height: 2.5rem; height: 2.5rem;
&>img { &>img {
flex-shrink: 0;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
border-radius: 50%; border-radius: 50%;

View File

@ -16,7 +16,7 @@ section.article-list {
min-height: max-content; min-height: max-content;
border: solid 1px #eee; border: solid 1px #eee;
border-radius: 1rem; border-radius: 1rem;
background: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
&>a.vh-article-link { &>a.vh-article-link {

View File

@ -29,7 +29,7 @@ aside.vh-aside {
max-width: 100%; max-width: 100%;
height: max-content; height: max-content;
border-radius: 1rem; border-radius: 1rem;
background: #fff; background-color: #fff;
color: #000; color: #000;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;
@ -48,7 +48,7 @@ aside.vh-aside {
width: 0.25rem; width: 0.25rem;
height: 1.16rem; height: 1.16rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #EDEEF3; background-color: var(--vh-color-default);
} }
} }
@ -78,7 +78,7 @@ aside.vh-aside {
width: 36%; width: 36%;
height: 0.26rem; height: 0.26rem;
border-radius: 3px; border-radius: 3px;
background: #EDEEF3; background-color: var(--vh-color-default);
} }
} }
@ -102,7 +102,7 @@ aside.vh-aside {
width: 1.88rem; width: 1.88rem;
height: 1.88rem; height: 1.88rem;
border: solid 1px #333; border: solid 1px #333;
background: #fff; background-color: #fff;
border-radius: 0.38rem; border-radius: 0.38rem;
overflow: hidden; overflow: hidden;
z-index: 1; z-index: 1;
@ -120,7 +120,7 @@ aside.vh-aside {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 0; height: 0;
background: #EDEEF3; background-color: var(--vh-color-default);
transition: height 0.16s ease-in-out; transition: height 0.16s ease-in-out;
z-index: -1; z-index: -1;
} }
@ -154,16 +154,16 @@ aside.vh-aside {
width: 100%; width: 100%;
height: 2.36rem; height: 2.36rem;
border-radius: 0.38rem; border-radius: 0.38rem;
background: #fff; background-color: #fff;
transition: all 0.16s ease-in-out; transition: all 0.16s ease-in-out;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
padding-left: 0.66rem; padding-left: 0.66rem;
background: #EDEEF388; background-color: var(--vh-color-default-88);
&>i { &>i {
background: transparent; background-color: transparent;
} }
} }
@ -176,7 +176,7 @@ aside.vh-aside {
font-size: 0.875rem; font-size: 0.875rem;
font-style: normal; font-style: normal;
border-radius: 0.38rem; border-radius: 0.38rem;
background: #EDEEF388; background-color: var(--vh-color-default-88);
transition: background 0.16s ease-in-out; transition: background 0.16s ease-in-out;
overflow: hidden; overflow: hidden;
} }
@ -200,7 +200,7 @@ aside.vh-aside {
&:hover { &:hover {
&>span { &>span {
background: #EDEEF3; background-color: var(--vh-color-default);
} }
} }
@ -211,7 +211,7 @@ aside.vh-aside {
width: max-content; width: max-content;
height: 1.75rem; height: 1.75rem;
border-radius: 0.38rem; border-radius: 0.38rem;
background: #EDEEF388; background-color: var(--vh-color-default-88);
font-size: 0.875rem; font-size: 0.875rem;
font-style: normal; font-style: normal;
line-height: 1.75rem; line-height: 1.75rem;

View File

@ -6,7 +6,7 @@ section.vh-back-top {
height: 2.6rem; height: 2.6rem;
border-radius: 50%; border-radius: 50%;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
background: #fff; background-color: #fff;
transform: translateX(1rem); transform: translateX(1rem);
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;

View File

@ -4,7 +4,7 @@
width: 100%; width: 100%;
height: max-content; height: max-content;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
overflow: hidden; overflow: hidden;
@ -26,12 +26,12 @@
// 其下面的code标签样式 // 其下面的code标签样式
code { code {
background: transparent; background-color: transparent;
} }
:not(pre) { :not(pre) {
&>code { &>code {
background-color: #edeef3; background-color: var(--vh-color-default);
padding: .125rem .375rem; padding: .125rem .375rem;
font-size: 0.8125rem; font-size: 0.8125rem;
} }
@ -70,7 +70,7 @@
// 及背景颜色 // 及背景颜色
.el-input-group__append, .el-input-group__append,
.el-input-group__prepend { .el-input-group__prepend {
background-color: #F5F6F8 !important; background-color: var(--vh-color-default-88) !important;
} }
// 评论内容样式 // 评论内容样式
@ -126,7 +126,7 @@
bottom: 0; bottom: 0;
width: 0; width: 0;
height: 1px; height: 1px;
background: #9999ff; background-color: #9999ff;
transition: all 0.28s; transition: all 0.28s;
} }
@ -161,8 +161,7 @@
bottom: -0.4rem; bottom: -0.4rem;
width: 0.8rem; width: 0.8rem;
height: 0.8rem; height: 0.8rem;
background: #fff; background: #fff url("/public/assets/images/admin.svg") no-repeat;
background: url("/public/assets/images/admin.svg") no-repeat;
background-size: cover; background-size: cover;
} }
} }
@ -201,7 +200,7 @@
bottom: 0; bottom: 0;
width: 0; width: 0;
height: 1px; height: 1px;
background: #4c4948; background-color: #4c4948;
transition: all 0.28s; transition: all 0.28s;
} }
@ -218,7 +217,7 @@
.tk-tag { .tk-tag {
color: #000; color: #000;
border-color: #000; border-color: #000;
background: transparent; background-color: transparent;
border-radius: 2px; border-radius: 2px;
font-size: 0.72rem; font-size: 0.72rem;
border-radius: 4px; border-radius: 4px;
@ -264,7 +263,7 @@
box-sizing: border-box; box-sizing: border-box;
padding: 4px; padding: 4px;
border-radius: 0.2rem; border-radius: 0.2rem;
background-color: #F5F6F8; background-color: var(--vh-color-default-88);
} }
} }

View File

@ -5,7 +5,7 @@
padding: 1rem; padding: 1rem;
width: 100%; width: 100%;
height: max-content; height: max-content;
background: rgba(0, 0, 0, 0.03); background-color: rgba(0, 0, 0, 0.03);
border-radius: 0.618rem; border-radius: 0.618rem;
overflow: hidden; overflow: hidden;
@ -26,7 +26,7 @@
content: ''; content: '';
width: 0; width: 0;
height: 2px; height: 2px;
background: #60a5fa; background-color: #60a5fa;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }

View File

@ -9,7 +9,7 @@ header.vh-header {
justify-content: center; justify-content: center;
width: 100vw; width: 100vw;
height: 3.6rem; height: 3.6rem;
background: #ffffff66; background-color: #ffffff66;
backdrop-filter: blur(2rem); backdrop-filter: blur(2rem);
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
z-index: 9; z-index: 9;
@ -63,7 +63,7 @@ header.vh-header {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #EDEEF3; background-color: var(--vh-color-default);
opacity: 0; opacity: 0;
transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out; transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
z-index: -1; z-index: -1;
@ -133,7 +133,7 @@ header.vh-header {
padding: 0.36rem; padding: 0.36rem;
width: 1.88rem; width: 1.88rem;
height: 1.88rem; height: 1.88rem;
border: 1px solid #EDEEF3; border: 1px solid var(--vh-color-default);
border-radius: 0.6rem; border-radius: 0.6rem;
} }
} }

View File

@ -52,7 +52,7 @@
width: 100%; width: 100%;
height: max-content; height: max-content;
border-radius: 0.75rem; border-radius: 0.75rem;
background: #F8F9FA; background-color: #F8F9FA;
overflow: hidden; overflow: hidden;
&.user-panel { &.user-panel {
@ -88,7 +88,7 @@
&:hover, &:hover,
&.active { &.active {
color: #fff; color: #fff;
background: #3366FF; background-color: #3366FF;
&>object { &>object {
filter: brightness(0) invert(100%); filter: brightness(0) invert(100%);

View File

@ -18,17 +18,17 @@ section.vh-article-pagination {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background: #fff; background-color: #fff;
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
font-size: 0.875rem; font-size: 0.875rem;
color: #99a9bf; color: #99a9bf;
user-select: none; user-select: none;
transition: background 0.16s ease-in-out; transition: background-color 0.16s ease-in-out;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(129, 146, 174, 0.36); background-color: rgba(129, 146, 174, 0.36);
&>svg { &>svg {
fill: #fff; fill: #fff;
@ -36,7 +36,7 @@ section.vh-article-pagination {
} }
&.active { &.active {
background: #8192AE; background-color: #8192AE;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
color: #fff; color: #fff;

View File

@ -53,7 +53,7 @@
gap: 0.28rem; gap: 0.28rem;
width: 100%; width: 100%;
height: 2.425rem; height: 2.425rem;
background: #F6F6F6; background-color: var(--vh-color-default-88);
border-radius: 0.66rem; border-radius: 0.66rem;
overflow: hidden; overflow: hidden;
@ -71,7 +71,7 @@
border: none; border: none;
color: #9CA3AF; color: #9CA3AF;
font-size: 0.875rem; font-size: 0.875rem;
background: transparent; background-color: transparent;
transition: width 0.16s ease-in-out; transition: width 0.16s ease-in-out;
&::placeholder { &::placeholder {
@ -86,11 +86,19 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: max-content; height: max-content;
background: #fff; background-color: #fff;
user-select: none; user-select: none;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
&>em {
margin: 1.88rem auto;
display: block;
width: 5.88rem;
height: 5.88rem;
background: url('data:image/svg+xml;charset=utf-8,%20%3Csvg%20t%3D%221740986741673%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%225345%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M942.93%20932.09H700.4c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h242.53c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66z%20m-30.32-51.97c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66h-60.63c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h60.63zM626.99%20202.6c5.71%203.2%2012.94%201.23%2016.21-4.43l46.66-80.67c3.32-5.75%201.3-13.1-4.49-16.35-5.71-3.2-12.94-1.23-16.21%204.43l-46.66%2080.67c-3.33%205.75-1.31%2013.1%204.49%2016.35z%20m-149.65-11.1h3.44c6.6%200%2011.95-5.34%2011.95-11.92V86.5c0-6.58-5.35-11.92-11.95-11.92h-3.44c-6.6%200-11.95%205.34-11.95%2011.92v93.08c0%206.58%205.35%2011.92%2011.95%2011.92zM302.3%20223.52c3.79%205.3%2011.13%206.59%2016.51%202.91l1.14-0.78c5.5-3.77%206.84-11.32%202.96-16.74l-53.85-75.41c-3.78-5.3-11.13-6.59-16.51-2.91l-1.13%200.78c-5.5%203.77-6.84%2011.32-2.96%2016.74l53.84%2075.41z%20m540.75%20131.67l-1.3-1.3c-1.3-2.6-3.91-5.19-7.81-6.5L466.7%20272.04h-6.51L163.26%20388.96c-0.01%200-0.02%200.01-0.04%200.01-1.27%200.38-2.4%201.12-3.34%202.06l-0.59%200.59a26.428%2026.428%200%200%200-4.33%205.65L65.59%20552.65c-1.3%202.6-2.61%206.5-1.3%2010.39%201.3%202.6%203.91%205.2%207.82%206.5l84.65%2022.09v228.64c0%205.2%203.91%209.1%207.81%2010.39l414.12%20118.22c2.61%201.3%206.51%200%209.12-1.3l260.45-145.5c3.91-2.6%205.21-5.2%205.21-10.39l-2.61-224.74%205.21-2.6%2098.98-58.46c2.6-1.3%205.21-5.19%205.21-7.79v-6.5L843.05%20355.19zM91.64%20551.35l82.04-139.01%206.51%201.3%20111.99%2027.28%20265.66%2064.96-97.67%20142.9-368.53-97.43z%20m85.95%20259.83V598.12h1.3l11.72%202.6%20270.87%2071.45c5.21%201.3%209.12%200%2011.72-5.2l91.16-133.81%203.91%20389.73-390.68-111.71zM585.2%20487.7l-286.5-68.85-93.76-22.08%20260.45-101.33%20334.68%2068.85-22.14%2012.99-32.56%2019.49L589.11%20489l-3.91-1.3z%20m6.51%20432.6l-3.91-400.13%2018.23%2031.18%2065.11%20109.12c2.61%205.2%2010.42%206.5%2015.63%203.9l141.95-83.14%202.6%20205.26L591.71%20920.3z%20m93.76-280.61l-79.44-133.81%207.81-5.19%20141.95-84.45%2071.62-42.87L930.3%20492.89l-244.83%20146.8z%22%20p-id%3D%225346%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
background-size: contain;
}
&>.vh-search-item { &>.vh-search-item {
box-sizing: border-box; box-sizing: border-box;