perf: 样式统一/优化

This commit is contained in:
pipipi-pikachu 2023-10-15 21:38:14 +08:00
parent d901fffd87
commit 76c0138d6a
13 changed files with 20 additions and 26 deletions

View File

@ -10,7 +10,7 @@
} }
::selection { ::selection {
background-color: rgba(#d14424, 0.25); background-color: rgba($themeColor, 0.25);
color: inherit; color: inherit;
} }

View File

@ -50,7 +50,7 @@ $subMenuWidth: 120px;
background: #fff; background: #fff;
border: 1px solid $borderColor; border: 1px solid $borderColor;
box-shadow: $boxShadow; box-shadow: $boxShadow;
border-radius: 2px; border-radius: $borderRadius;
list-style: none; list-style: none;
margin: 0; margin: 0;
} }

View File

@ -46,14 +46,14 @@ withDefaults(defineProps<{
.spinner { .spinner {
width: 36px; width: 36px;
height: 36px; height: 36px;
border: 3px solid #d14424; border: 3px solid $themeColor;
border-top-color: transparent; border-top-color: transparent;
border-radius: 50%; border-radius: 50%;
animation: spinner .8s linear infinite; animation: spinner .8s linear infinite;
} }
.text { .text {
margin-top: 20px; margin-top: 20px;
color: #d14424; color: $themeColor;
} }
@keyframes spinner { @keyframes spinner {
0% { 0% {

View File

@ -101,6 +101,7 @@ const onClickMask = () => {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
border-radius: $borderRadius; border-radius: $borderRadius;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
position: relative; position: relative;
} }

View File

@ -84,7 +84,7 @@ onMounted(() => {
padding: 10px; padding: 10px;
border: 1px solid $borderColor; border: 1px solid $borderColor;
box-shadow: $boxShadow; box-shadow: $boxShadow;
border-radius: 2px; border-radius: $borderRadius;
font-size: 13px; font-size: 13px;
} }
</style> </style>

View File

@ -20,7 +20,7 @@ const emit = defineEmits<{
.popover-menu-item { .popover-menu-item {
min-width: 80px; min-width: 80px;
padding: 6px 10px; padding: 6px 10px;
border-radius: 2px; border-radius: $borderRadius;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;

View File

@ -141,6 +141,7 @@ const handleSelect = (option: SelectOption) => {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
padding: 0 5px; padding: 0 5px;
border-radius: $borderRadius;
cursor: pointer; cursor: pointer;
@include ellipsis-oneline(); @include ellipsis-oneline();

View File

@ -262,7 +262,7 @@ const handleMousedown = (e: MouseEvent | TouchEvent) => {
background-color: #262626; background-color: #262626;
text-align: center; text-align: center;
color: #fff; color: #fff;
border-radius: 2px; border-radius: $borderRadius;
padding: 6px 5px; padding: 6px 5px;
font-size: 12px; font-size: 12px;
} }

View File

@ -1,7 +1,7 @@
.tippy-box[data-theme~='tooltip'] { .tippy-box[data-theme~='tooltip'] {
background-color: #262626; background-color: #262626;
color: #fff; color: #fff;
border-radius: 2px; border-radius: $borderRadius;
padding: 8px; padding: 8px;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;

View File

@ -164,6 +164,7 @@ const setDialogForExport = (type: DialogForExportTypes) => {
display: flex; display: flex;
margin: 0 8px; margin: 0 8px;
padding: 0 2px; padding: 0 2px;
border-radius: $borderRadius;
&:hover { &:hover {
background-color: #f1f1f1; background-color: #f1f1f1;

View File

@ -371,7 +371,8 @@ $attentionColor: #e8b76a;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
font-size: 12px; font-size: 12px;
margin-right: -12px; margin-right: -10px;
padding-right: 5px;
position: relative; position: relative;
.mask { .mask {
@ -391,13 +392,16 @@ $attentionColor: #e8b76a;
background-color: rgba($color: $attentionColor, $alpha: .15); background-color: rgba($color: $attentionColor, $alpha: .15);
} }
} }
.pool-type:not(:last-child) {
margin-bottom: 5px;
}
.type-title { .type-title {
width: 100%; width: 100%;
font-size: 13px; font-size: 13px;
margin-bottom: 10px; margin-bottom: 10px;
border-left: 4px solid #aaa; border-left: 4px solid #aaa;
background-color: #eee; background-color: #eee;
padding: 2px 0 2px 10px; padding: 4px 0 4px 10px;
} }
.pool-item-wrapper { .pool-item-wrapper {
@include flex-grid-layout(); @include flex-grid-layout();
@ -405,7 +409,7 @@ $attentionColor: #e8b76a;
.pool-item { .pool-item {
@include flex-grid-layout-children(4, 24%); @include flex-grid-layout-children(4, 24%);
margin-bottom: 10px; margin-bottom: 5px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
@ -413,6 +417,7 @@ $attentionColor: #e8b76a;
} }
.animation-box { .animation-box {
background-color: $lightGray; background-color: $lightGray;
border-radius: $borderRadius;
} }
.animation-sequence { .animation-sequence {

View File

@ -616,21 +616,6 @@ const updateLink = (link?: string) => {
background-color: #666; background-color: #666;
} }
} }
.popover-list {
display: flex;
flex-direction: column;
padding: 5px;
margin: -12px;
}
.popover-item {
padding: 9px 12px;
border-radius: 2px;
cursor: pointer;
&:hover {
background-color: #f5f5f5;
}
}
.popover-btn { .popover-btn {
padding: 0 3px; padding: 0 3px;
} }

View File

@ -372,6 +372,7 @@ const updateViewportRatio = (value: number) => {
justify-content: center; justify-content: center;
padding: 8px; padding: 8px;
border: 1px solid $borderColor; border: 1px solid $borderColor;
border-radius: $borderRadius;
} }
.text { .text {