mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
perf: 样式统一/优化
This commit is contained in:
parent
d901fffd87
commit
76c0138d6a
@ -10,7 +10,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
background-color: rgba(#d14424, 0.25);
|
background-color: rgba($themeColor, 0.25);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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% {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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();
|
||||||
|
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user