refactor light-dark selection to variables defination.
This commit is contained in:
@@ -3,9 +3,6 @@
|
||||
flex: 2;
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
background-color: light-dark(
|
||||
var(--color-light-surface-container),
|
||||
var(--color-dark-surface-container)
|
||||
);
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
padding-inline: calc(var(--spacing) * 2);
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
background-color: light-dark(var(--color-light-surface), var(--color-dark-surface));
|
||||
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-on-surface);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -37,20 +37,14 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:hover {
|
||||
background-color: light-dark(
|
||||
color-mix(in oklch, var(--color-light-on-surface) 8%, transparent),
|
||||
color-mix(in oklch, var(--color-dark-on-surface) 8%, transparent)
|
||||
);
|
||||
background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
|
||||
}
|
||||
}
|
||||
.empty_prompt {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
text-align: center;
|
||||
font-size: calc(var(--font-size) * 0.8);
|
||||
color: light-dark(
|
||||
var(--color-light-on-surface-variant),
|
||||
var(--color-dark-on-surface-variant)
|
||||
);
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,10 +7,7 @@
|
||||
gap: calc(var(--spacing) * 2);
|
||||
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
color: light-dark(var(--color-light-on-surface), var(--color-dark-on-surface));
|
||||
background-color: light-dark(
|
||||
var(--color-light-surface-container),
|
||||
var(--color-dark-surface-container)
|
||||
);
|
||||
color: var(--color-light-on-surface);
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,6 @@
|
||||
.pattern_detail {
|
||||
flex: 2;
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
background-color: light-dark(
|
||||
var(--color-light-surface-container),
|
||||
var(--color-dark-surface-container)
|
||||
);
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,6 @@
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
background-color: light-dark(
|
||||
var(--color-light-surface-container),
|
||||
var(--color-dark-surface-container)
|
||||
);
|
||||
background-color: var(--color-surface-container);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
flex: 1;
|
||||
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
|
||||
border-radius: calc(var(--border-radius) * 2);
|
||||
background-color: light-dark(
|
||||
var(--color-light-surface-container),
|
||||
var(--color-dark-surface-container)
|
||||
);
|
||||
background-color: var(--color-surface-container);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing));
|
||||
|
||||
Reference in New Issue
Block a user