mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-08 07:51:37 +08:00
feat: add theme radius customization
This commit is contained in:
@@ -196,7 +196,7 @@ function submitSettings() {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background-color: rgba(var(--v-theme-surface-variant), 0.3);
|
||||
cursor: pointer;
|
||||
padding-block: 10px;
|
||||
|
||||
@@ -118,7 +118,7 @@ function submitOrder() {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--v-theme-primary), 0.3);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background-color: rgba(var(--v-theme-primary), 0.08);
|
||||
cursor: grab;
|
||||
padding-block: 10px;
|
||||
|
||||
@@ -278,7 +278,7 @@ async function doDelete() {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background-color: rgba(var(--v-theme-surface), 0.8);
|
||||
block-size: 280px;
|
||||
inline-size: 240px;
|
||||
@@ -290,7 +290,7 @@ async function doDelete() {
|
||||
|
||||
.vue-flow__node {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
font-size: 10px;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -116,7 +116,7 @@ const colorTheme = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.offline-dialog {
|
||||
border-radius: 16px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
}
|
||||
|
||||
.status-icon-wrapper {
|
||||
|
||||
@@ -505,7 +505,7 @@ onMounted(() => {
|
||||
.plugin-market-list-wrap {
|
||||
flex: 1;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background: rgba(var(--v-theme-surface), 0.72);
|
||||
min-block-size: 0;
|
||||
overflow-y: auto;
|
||||
@@ -563,7 +563,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background: rgba(var(--v-theme-surface), 0.72);
|
||||
min-block-size: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1914,7 +1914,7 @@ onUnmounted(() => {
|
||||
|
||||
.preview-note {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 1rem;
|
||||
border-radius: var(--app-surface-radius);
|
||||
color: rgb(var(--v-theme-error));
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
@@ -1932,7 +1932,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 1rem;
|
||||
border-radius: var(--app-surface-radius);
|
||||
gap: 0.375rem;
|
||||
min-inline-size: 0;
|
||||
padding-block: 0.875rem;
|
||||
@@ -1959,7 +1959,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 0.75rem;
|
||||
border-radius: var(--app-surface-radius);
|
||||
gap: 0.75rem;
|
||||
padding-block: 0.875rem;
|
||||
padding-inline: 1rem;
|
||||
@@ -2052,7 +2052,7 @@ onUnmounted(() => {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 1rem;
|
||||
border-radius: var(--app-surface-radius);
|
||||
margin-block-end: 1.5rem;
|
||||
margin-inline: 1.5rem;
|
||||
min-block-size: 0;
|
||||
|
||||
@@ -698,7 +698,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
border-radius: 16px !important;
|
||||
border-radius: var(--app-surface-radius) !important;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 12%) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -394,7 +394,7 @@ watch(selectedFile, async newFile => {
|
||||
.upload-zone {
|
||||
padding: 2rem;
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -719,7 +719,7 @@ onMounted(() => {
|
||||
|
||||
.site-resource-card__meta-item {
|
||||
border: 1px solid rgba(var(--v-border-color), calc(var(--v-border-opacity) * 0.7));
|
||||
border-radius: 0.6rem;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background: rgba(var(--v-theme-surface), 0.78);
|
||||
min-block-size: 0;
|
||||
padding-block: 0.55rem;
|
||||
|
||||
@@ -392,7 +392,7 @@ onMounted(() => {
|
||||
.stat-card {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--v-border-color);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background: var(--v-theme-surface);
|
||||
min-inline-size: 100px;
|
||||
text-align: center;
|
||||
|
||||
@@ -602,7 +602,7 @@ const isMacOS = computed(() => {
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
border: 1px solid rgb(var(--v-theme-primary));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
box-shadow: 0 8px 24px rgba(var(--v-shadow-key-umbra-color), 0.32);
|
||||
gap: 14px;
|
||||
@@ -656,7 +656,7 @@ const isMacOS = computed(() => {
|
||||
.vue-flow__minimap {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 8px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
background-color: rgba(var(--v-theme-surface), 0.8);
|
||||
box-shadow: 0 4px 15px rgba(var(--v-shadow-key-umbra-color), 0.1);
|
||||
inset-block-end: 20px;
|
||||
@@ -687,7 +687,7 @@ const isMacOS = computed(() => {
|
||||
// 自定义节点样式
|
||||
.vue-flow__node {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 12px;
|
||||
border-radius: var(--app-surface-radius);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 16px rgba(var(--v-shadow-key-umbra-color), 0.15) !important;
|
||||
|
||||
Reference in New Issue
Block a user