study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-07 21:46:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

背景颜色样式调整

Browse Source
This commit is contained in:
fofolee 2025-02-15 12:06:34 +08:00
parent c6b511696a
commit 4262182f63
10 changed files with 71 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/CommandCard.vue
View File

@ -92,26 +92,6 @@ export default {
</script>
<style scoped>
.q-card.command {
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-webkit-backdrop-filter: blur(
calc(var(--glass-effect-strength) * 1px)
) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
}
.body--dark .q-card.command {
background: rgba(57, 57, 57, 0.09) !important;
border: 1px solid rgb(59 58 58 / 5%);
box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
0 3px 1px -2px rgb(69 67 67 / 12%);
}
.card-wrapper {
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, width;

8
src/components/card/CommandCardContent.vue
View File

@ -61,7 +61,6 @@ export default {
</script>
<style scoped>
/* 保留卡片基础样式 */
.q-card.command {
cursor: pointer;
user-select: none;
@ -74,4 +73,11 @@ export default {
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
}
.body--dark .q-card.command {
background: rgba(57, 57, 57, 0.09) !important;
border: 1px solid rgb(59 58 58 / 5%);
box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
0 3px 1px -2px rgb(69 67 67 / 12%);
}
</style>

6
src/components/composer/CommandComposer.vue
View File

@ -76,11 +76,7 @@ export default defineComponent({
display: flex;
flex-direction: column;
height: 100%;
background-color: #f4f4f4;
}
.body--dark .command-composer {
background-color: #303132;
background-color: var(--utools-bg-color);
}
.composer-body {

17
src/components/composer/ComposerCard.vue
View File

@ -315,14 +315,6 @@ export default defineComponent({
position: relative;
}
.composer-card .q-card {
background-color: rgba(0, 0, 0, 0.02);
}
.body--dark .composer-card .q-card {
background-color: rgba(255, 255, 255, 0.05);
}
/* 控制流程组件样式 */
.control-component {
flex: 1;
@ -340,6 +332,7 @@ export default defineComponent({
.command-item {
transition: all 0.3s ease;
background-color: var(--transparent-bg-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: inherit;
@ -353,14 +346,6 @@ export default defineComponent({
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.body--dark .composer-card.drag-handle:hover::before {
background: rgba(255, 255, 255, 0.1);
}
.body--dark .composer-card.drag-handle:active::before {
background: rgba(255, 255, 255, 0.15);
}
/* 收起状态样式 */
.composer-card.collapsed {
transform-origin: top;

15
src/components/composer/ComposerList.vue
View File

@ -294,7 +294,7 @@ export default defineComponent({
margin: 4px 8px;
padding: 0 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(0, 0, 0, 0.02);
background: var(--transparent-bg-color);
cursor: grab;
font-size: 12px;
min-height: 40px;
@ -315,8 +315,7 @@ export default defineComponent({
}
.command-item.q-item-type:hover {
background-color: rgba(0, 0, 0, 0.1);
transform: translateX(4px);
transform: translateX(3px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
@ -325,16 +324,6 @@ export default defineComponent({
transform: scale(0.95);
}
/* 暗色模式适配 */
.body--dark .command-item.q-item-type {
border-color: rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.05);
}
.body--dark .command-item.q-item-type:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.body--dark .section-header {
border-bottom-color: rgba(255, 255, 255, 0.05);
}

9
src/components/composer/flow/DropArea.vue
View File

@ -64,14 +64,7 @@ export default defineComponent({
.drop-area:hover,
.drop-area-dragging {
border-color: #bdbdbd;
background-color: #f9f9f9;
}
.body--dark .drop-area:hover,
.body--dark .drop-area-dragging {
border: 2px dashed #676666;
background-color: #303132;
background-color: var(--utools-bg-color);
}
.drop-area-dragging {

13
src/components/popup/EditorHistory.vue
View File

@ -339,6 +339,7 @@ export default {
height: 100vh;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
background-color: var(--utools-bg-color);
}
.history-layout {
@ -361,7 +362,6 @@ export default {
.header-section {
padding: 16px 16px 8px;
position: relative;
background: #f4f4f4;
}
.preview-container {
@ -371,7 +371,6 @@ export default {
align-items: stretch;
justify-content: stretch;
overflow: hidden;
background: #f4f4f4;
transition: all 0.3s ease;
position: relative;
}
@ -386,7 +385,6 @@ export default {
.history-list {
flex: 1;
padding: 0;
background: #f4f4f4;
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 64px); /* Subtract header height */
@ -499,15 +497,6 @@ export default {
opacity: 0.3;
}
/* 暗色模式适配 */
.body--dark .history-card,
.body--dark .history-list-container,
.body--dark .header-section,
.body--dark .history-list,
.body--dark .preview-container {
background: #303133;
}
.history-btn {
color: #666;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

6
src/components/quickcommandUI/QuickCommand.vue
View File

@ -371,10 +371,6 @@ export default {
<style>
.quickcommand-ui.q-card {
background-color: var(--utools-bright-bg);
}
.body--dark .quickcommand-ui.q-card {
background-color: var(--utools-dark-bg);
background-color: var(--utools-bg-color);
}
</style>

72
src/css/app.css
View File

@ -1,20 +1,25 @@
/* app global css */
:root {
--utools-bright-bg: #f4f4f4;
--utools-bright-font-color: #333;
--utools-dark-bg: #303133;
--utools-dark-font-color: #fff;
--utools-bg-color: #f4f4f4;
--utools-font-color: #333;
--transparent-bg-color: rgba(0, 0, 0, 0.02);
--q-dark: #464646;
--q-dark-page: var(--utools-dark-bg);
--q-dark-page: #303133;
}
:root:has(.body--dark) {
--utools-bg-color: #303133;
--utools-font-color: #fff;
--transparent-bg-color: rgba(255, 255, 255, 0.05);
}
.q-card--dark {
background: var(--utools-dark-bg);
background: var(--q-dark-page);
}
body {
background: var(--utools-bright-bg);
color: var(--utools-bright-font-color);
background: var(--utools-bg-color);
color: var(--utools-font-color);
}
/* Monaco Editor 调整行号栏样式 */
@ -32,7 +37,7 @@ body {
/* Monaco Editor 当前行高亮样式 */
.monaco-editor .current-line {
border: none !important;
background-color: rgba(0, 0, 0, 0.03);
background-color: transparent !important;
}
.monaco-editor .line-numbers {
@ -47,10 +52,6 @@ body {
color: var(--q-primary) !important;
}
.body--dark .monaco-editor .current-line {
background-color: rgba(255, 255, 255, 0.05);
}
.monaco-editor .margin-view-overlays .current-line {
background-color: transparent !important;
}
@ -188,14 +189,14 @@ body.body--dark.glass-effect-menu .q-card.command {
}
/* 标签栏毛玻璃效果 */
body.glass-effect-menu .q-tabs {
body.glass-effect-menu .tag-bar .q-tabs {
background: rgba(255, 255, 255, calc(0.15 + var(--glass-effect-strength) * 0.01)) !important;
backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
-webkit-backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
body.body--dark.glass-effect-menu .q-tabs {
body.body--dark.glass-effect-menu .tag-bar .q-tabs {
background: rgba(0, 0, 0, calc(0.2 + var(--glass-effect-strength) * 0.02)) !important;
border-right: 1px solid rgba(255, 255, 255, 0.05);
}
@ -305,3 +306,44 @@ body.body--dark.glass-effect-menu .q-menu {
justify-content: flex-end;
font-size: 12px;
}
/* 左右抖动 */
@keyframes leftRight {
0% {
transform: translateX(-2px);
opacity: 0.7;
}
50% {
transform: translateX(2px);
opacity: 1;
}
100% {
transform: translateX(-2px);
opacity: 0.7;
}
}
/* 上下抖动 */
@keyframes upDown {
0% {
transform: translateY(-1px);
opacity: 1;
}
50% {
transform: translateY(1px);
opacity: 0.6;
}
75% {
transform: translateY(0.5px);
opacity: 0.8;
}
100% {
transform: translateY(-1px);
opacity: 1;
}
}

6
src/css/composer.css
View File

@ -89,12 +89,6 @@
margin: 4px 0px;
}
/* 暗黑模式下的标签栏背景颜色 */
.body--dark .command-composer .q-tab,
.body--dark .command-composer .q-tab-panel {
background-color: #303133;
}
.body--dark .command-composer .q-tab--inactive {
opacity: 2;
}