sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): prefix css variables (#14725)

Browse Source 
* wip

* Update index.d.ts

* remove unnecessary codes
This commit is contained in:
syuilo
2024-10-09 18:08:14 +09:00
committed by GitHub
parent 0ad31bd5d4
commit 4a356f1ba7
280 changed files with 1076 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend-embed/src/components/EmLoading.vue
View File

@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
--size: 38px;
&.colored {
color: var(--accent);
color: var(--MI_THEME-accent);
}
&.inline {

8
packages/frontend-embed/src/components/EmMediaBanner.vue
View File

@@ -33,15 +33,15 @@ defineProps<{
width: 100%;
padding: var(--margin);
margin-top: 4px;
border: 1px solid var(--inputBorder);
border: 1px solid var(--MI_THEME-inputBorder);
border-radius: var(--radius);
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
transition: background-color .1s, border-color .1s;
&:hover {
text-decoration: none;
border-color: var(--inputBorderHover);
background-color: var(--buttonHoverBg);
border-color: var(--MI_THEME-inputBorderHover);
background-color: var(--MI_THEME-buttonHoverBg);
}
}

18
packages/frontend-embed/src/components/EmMediaImage.vue
View File

@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
<div v-if="image.comment" :class="$style.indicator">ALT</div>
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
<i v-if="!hide" class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
</div>
@@ -94,8 +94,8 @@ async function onclick(ev: MouseEvent) {
display: block;
position: absolute;
border-radius: 6px;
background-color: var(--fg);
color: var(--accentLighten);
background-color: var(--MI_THEME-fg);
color: var(--MI_THEME-accentLighten);
font-size: 12px;
opacity: .5;
padding: 5px 8px;
@@ -114,19 +114,19 @@ async function onclick(ev: MouseEvent) {
.visible {
position: relative;
//box-shadow: 0 0 0 1px var(--divider) inset;
background: var(--bg);
//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
background: var(--MI_THEME-bg);
background-size: 16px 16px;
}
html[data-color-scheme=dark] .visible {
--c: rgb(255 255 255 / 2%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
}
html[data-color-scheme=light] .visible {
--c: rgb(0 0 0 / 2%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
}
.imageContainer {
@@ -150,10 +150,10 @@ html[data-color-scheme=light] .visible {
}
.indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
background-color: black;
border-radius: 6px;
color: var(--accentLighten);
color: var(--MI_THEME-accentLighten);
display: inline-block;
font-weight: bold;
font-size: 0.8em;

4
packages/frontend-embed/src/components/EmMediaVideo.vue
View File

@@ -30,7 +30,7 @@ defineProps<{
height: auto;
aspect-ratio: 16 / 9;
padding: var(--margin);
border: 1px solid var(--divider);
border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius);
background-color: #000;
@@ -49,7 +49,7 @@ defineProps<{
}
.videoOverlayPlayButton {
background: var(--accent);
background: var(--MI_THEME-accent);
color: #fff;
padding: 1rem;
border-radius: 99rem;

4
packages/frontend-embed/src/components/EmMention.vue
View File

@@ -27,7 +27,7 @@ const canonical = props.host === localHost ? `@${props.username}` : `@${props.us
const url = `/${canonical}`;
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--mention'));
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-mention'));
bg.setAlpha(0.1);
const bgCss = bg.toRgbString();
</script>
@@ -37,7 +37,7 @@ const bgCss = bg.toRgbString();
display: inline-block;
padding: 4px 8px 4px 4px;
border-radius: 999px;
color: var(--mention);
color: var(--MI_THEME-mention);
}
.host {

10
packages/frontend-embed/src/components/EmMfm.ts
View File

@@ -26,8 +26,8 @@ const QUOTE_STYLE = `
display: block;
margin: 8px;
padding: 6px 0 6px 12px;
color: var(--fg);
border-left: solid 3px var(--fg);
color: var(--MI_THEME-fg);
border-left: solid 3px var(--MI_THEME-fg);
opacity: 0.7;
`.split('\n').join(' ');
@@ -251,7 +251,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
}
case 'border': {
let color = validColor(token.props.args.color);
color = color ? `#${color}` : 'var(--accent)';
color = color ? `#${color}` : 'var(--MI_THEME-accent)';
let b_style = token.props.args.style;
if (
typeof b_style !== 'string' ||
@@ -284,7 +284,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
const child = token.children[0];
const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
return h('span', {
style: 'display: inline-block; font-size: 90%; border: solid 1px var(--divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
}, [
h('i', {
class: 'ti ti-clock',
@@ -355,7 +355,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
return [h(EmA, {
key: Math.random(),
to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
style: 'color:var(--hashtag);',
style: 'color:var(--MI_THEME-hashtag);',
}, `#${token.props.hashtag}`)];
}

24
packages/frontend-embed/src/components/EmNote.vue
View File

@@ -189,7 +189,7 @@ const isDeleted = ref(false);
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--focus);
border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius);
box-sizing: border-box;
}
@@ -212,9 +212,9 @@ const isDeleted = ref(false);
right: 12px;
padding: 0 4px;
margin-bottom: 0 !important;
background: var(--popup);
background: var(--MI_THEME-popup);
border-radius: 8px;
box-shadow: 0px 4px 32px var(--shadow);
box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
}
.footerButton {
@@ -259,7 +259,7 @@ const isDeleted = ref(false);
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
& + .article {
padding-top: 8px;
@@ -382,7 +382,7 @@ const isDeleted = ref(false);
.showLessLabel {
display: inline-block;
background: var(--popup);
background: var(--MI_THEME-popup);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -403,16 +403,16 @@ const isDeleted = ref(false);
z-index: 2;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
&:hover > .collapsedLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
.collapsedLabel {
display: inline-block;
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -424,12 +424,12 @@ const isDeleted = ref(false);
}
.replyIcon {
color: var(--accent);
color: var(--MI_THEME-accent);
margin-right: 0.5em;
}
.translation {
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
padding: 12px;
margin-top: 8px;
@@ -449,7 +449,7 @@ const isDeleted = ref(false);
.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px;
overflow: clip;
}
@@ -473,7 +473,7 @@ const isDeleted = ref(false);
}
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}

22
packages/frontend-embed/src/components/EmNoteDetailed.vue
View File

@@ -195,7 +195,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.renoteAvatar {
@@ -281,7 +281,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
padding: 4px 6px;
font-size: 80%;
line-height: 1;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: 4px;
}
@@ -323,14 +323,14 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
}
.noteReplyTarget {
color: var(--accent);
color: var(--MI_THEME-accent);
margin-right: 0.5em;
}
.rn {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.reactionOmitted {
@@ -350,7 +350,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px;
overflow: clip;
}
@@ -369,7 +369,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
.showLessLabel {
display: inline-block;
background: var(--popup);
background: var(--MI_THEME-popup);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -390,16 +390,16 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
z-index: 2;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15));
background: linear-gradient(0deg, var(--MI_THEME-panel), var(--MI_THEME-X15));
&:hover > .collapsedLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
.collapsedLabel {
display: inline-block;
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -422,7 +422,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
}
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}
@@ -438,7 +438,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
opacity: 0.7;
&.reacted {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}

2
packages/frontend-embed/src/components/EmNoteHeader.vue
View File

@@ -72,7 +72,7 @@ defineProps<{
margin: 0 .5em 0 0;
padding: 1px 6px;
font-size: 80%;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: 3px;
}

4
packages/frontend-embed/src/components/EmNoteSub.vue
View File

@@ -123,7 +123,7 @@ if (props.detail) {
}
.reply, .more {
border-left: solid 0.5px var(--divider);
border-left: solid 0.5px var(--MI_THEME-divider);
margin-top: 10px;
}
@@ -144,7 +144,7 @@ if (props.detail) {
.muted {
text-align: center;
padding: 8px !important;
border: 1px solid var(--divider);
border: 1px solid var(--MI_THEME-divider);
margin: 8px 8px 0 8px;
border-radius: 8px;
}

4
packages/frontend-embed/src/components/EmNotes.vue
View File

@@ -43,10 +43,10 @@ defineExpose({
<style lang="scss" module>
.root {
background: var(--panel);
background: var(--MI_THEME-panel);
}
.note {
border-bottom: 0.5px solid var(--divider);
border-bottom: 0.5px solid var(--MI_THEME-divider);
}
</style>

14
packages/frontend-embed/src/components/EmPoll.vue
View File

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice">
<div :class="$style.bg" :style="{ 'width': `${choice.votes / total * 100}%` }"></div>
<span :class="$style.fg">
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--accent);"></i></template>
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--MI_THEME-accent);"></i></template>
<EmMfm :text="choice.text" :plain="true"/>
<span style="margin-left: 4px; opacity: 0.7;">({{ i18n.tsx._poll.votesCount({ n: choice.votes }) }})</span>
</span>
@@ -52,8 +52,8 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
position: relative;
margin: 4px 0;
padding: 4px;
//border: solid 0.5px var(--divider);
background: var(--accentedBg);
//border: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-accentedBg);
border-radius: 4px;
overflow: clip;
}
@@ -63,8 +63,8 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
top: 0;
left: 0;
height: 100%;
background: var(--accent);
background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
background: var(--MI_THEME-accent);
background: linear-gradient(90deg,var(--MI_THEME-buttonGradateA),var(--MI_THEME-buttonGradateB));
transition: width 1s ease;
}
@@ -72,11 +72,11 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
position: relative;
display: inline-block;
padding: 3px 5px;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 3px;
}
.info {
color: var(--fg);
color: var(--MI_THEME-fg);
}
</style>

10
packages/frontend-embed/src/components/EmReactionsViewer.reaction.vue
View File

@@ -38,7 +38,7 @@ const props = defineProps<{
justify-content: center;
&.canToggle {
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
&:hover {
background: rgba(0, 0, 0, 0.1);
@@ -72,12 +72,12 @@ const props = defineProps<{
}
&.reacted, &.reacted:hover {
background: var(--accentedBg);
color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset;
background: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
box-shadow: 0 0 0 1px var(--MI_THEME-accent) inset;
> .count {
color: var(--accent);
color: var(--MI_THEME-accent);
}
> .icon {

12
packages/frontend-embed/src/components/EmSubNoteContent.vue
View File

@@ -65,11 +65,11 @@ const collapsed = ref(isLong);
left: 0;
width: 100%;
height: 64px;
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
> .fadeLabel {
display: inline-block;
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -78,7 +78,7 @@ const collapsed = ref(isLong);
&:hover {
> .fadeLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
}
@@ -87,13 +87,13 @@ const collapsed = ref(isLong);
.reply {
margin-right: 6px;
color: var(--accent);
color: var(--MI_THEME-accent);
}
.rp {
margin-left: 4px;
font-style: oblique;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.showLess {
@@ -105,7 +105,7 @@ const collapsed = ref(isLong);
.showLessLabel {
display: inline-block;
background: var(--popup);
background: var(--MI_THEME-popup);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;

4
packages/frontend-embed/src/components/EmTime.vue
View File

@@ -98,10 +98,10 @@ if (!invalid && props.origin === null && (props.mode === 'relative' || props.mod
<style lang="scss" module>
.old1 {
color: var(--warn);
color: var(--MI_THEME-warn);
}
.old1.old2 {
color: var(--error);
color: var(--MI_THEME-error);
}
</style>

4
packages/frontend-embed/src/components/EmTimelineContainer.vue
View File

@@ -20,7 +20,7 @@ withDefaults(defineProps<{
<style module lang="scss">
.timelineRoot {
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
height: 100%;
max-height: var(--embedMaxHeight, none);
display: flex;
@@ -29,7 +29,7 @@ withDefaults(defineProps<{
.header {
flex-shrink: 0;
border-bottom: 1px solid var(--divider);
border-bottom: 1px solid var(--MI_THEME-divider);
}
.body {

4
packages/frontend-embed/src/pages/clip.vue
View File

@@ -110,8 +110,8 @@ function top(ev: MouseEvent) {
line-height: 32px;
font-size: 14px;
text-align: center;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
border-radius: 50%;
}

2
packages/frontend-embed/src/pages/note.vue
View File

@@ -47,6 +47,6 @@ if (note.value?.url != null || note.value?.uri != null) {
<style lang="scss" module>
.noteEmbedRoot {
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
}
</style>

4
packages/frontend-embed/src/pages/tag.vue
View File

@@ -93,8 +93,8 @@ function top(ev: MouseEvent) {
line-height: 32px;
font-size: 14px;
text-align: center;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
border-radius: 50%;
}

50
packages/frontend-embed/src/style.scss
View File

@@ -17,8 +17,8 @@
html {
background-color: transparent;
color-scheme: light dark;
color: var(--fg);
accent-color: var(--accent);
color: var(--MI_THEME-fg);
accent-color: var(--MI_THEME-accent);
overflow: clip;
overflow-wrap: break-word;
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
@@ -29,7 +29,7 @@ html {
-webkit-text-size-adjust: 100%;
&, * {
scrollbar-color: var(--scrollbarHandle) transparent;
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
scrollbar-width: thin;
&::-webkit-scrollbar {
@@ -42,14 +42,14 @@ html {
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbarHandle);
background: var(--MI_THEME-scrollbarHandle);
&:hover {
background: var(--scrollbarHandleHover);
background: var(--MI_THEME-scrollbarHandleHover);
}
&:active {
background: var(--accent);
background: var(--MI_THEME-accent);
}
}
}
@@ -93,7 +93,7 @@ rt {
}
:focus-visible {
outline: var(--focus) solid 2px;
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
&:hover {
@@ -151,38 +151,38 @@ rt {
._buttonGray {
@extend ._button;
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
&:not(:disabled):hover {
background: var(--buttonHoverBg);
background: var(--MI_THEME-buttonHoverBg);
}
}
._buttonPrimary {
@extend ._button;
color: var(--fgOnAccent);
background: var(--accent);
color: var(--MI_THEME-fgOnAccent);
background: var(--MI_THEME-accent);
&:not(:disabled):hover {
background: hsl(from var(--accent) h s calc(l + 5));
background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
}
&:not(:disabled):active {
background: hsl(from var(--accent) h s calc(l - 5));
background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
}
}
._buttonGradate {
@extend ._buttonPrimary;
color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
color: var(--MI_THEME-fgOnAccent);
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
&:not(:disabled):hover {
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
&:not(:disabled):active {
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
}
}
@@ -199,13 +199,13 @@ rt {
}
._help {
color: var(--accent);
color: var(--MI_THEME-accent);
cursor: help;
}
._textButton {
@extend ._button;
color: var(--accent);
color: var(--MI_THEME-accent);
&:focus-visible {
outline-offset: 2px;
@@ -217,7 +217,7 @@ rt {
}
._panel {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
overflow: clip;
}
@@ -263,22 +263,22 @@ rt {
padding: 10px;
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
&:active {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
}
._popup {
background: var(--popup);
background: var(--MI_THEME-popup);
border-radius: var(--radius);
contain: content;
}
._acrylic {
background: var(--acrylicPanel);
background: var(--MI_THEME-acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
@@ -296,7 +296,7 @@ rt {
}
._link {
color: var(--link);
color: var(--MI_THEME-link);
}
._caption {

2
packages/frontend-embed/src/theme.ts
View File

@@ -61,7 +61,7 @@ export function applyTheme(theme: Theme, persist = true) {
}
for (const [k, v] of Object.entries(props)) {
document.documentElement.style.setProperty(`--${k}`, v.toString());
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
}
// iframeを正常に透過させるために、cssのcolor-schemeは `light dark;` 固定にしてある。style.scss参照

4
packages/frontend-embed/src/ui.vue
View File

@@ -88,8 +88,8 @@ onUnmounted(() => {
<style lang="scss" module>
.rootForEmbedPage {
box-sizing: border-box;
border: 1px solid var(--divider);
background-color: var(--bg);
border: 1px solid var(--MI_THEME-divider);
background-color: var(--MI_THEME-bg);
overflow: hidden;
position: relative;
height: auto;