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/src/_dev_boot_.ts
View File

@@ -43,7 +43,7 @@ async function main() {
const theme = localStorage.getItem('theme');
if (theme) {
for (const [k, v] of Object.entries(JSON.parse(theme))) {
document.documentElement.style.setProperty(`--${k}`, v.toString());
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
// HTMLの theme-color 適用
if (k === 'htmlThemeColor') {

6
packages/frontend/src/boot/common.ts
View File

@@ -182,12 +182,6 @@ export async function common(createVue: () => App<Element>) {
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
defaultStore.set('themeInitial', false);
} else {
if (defaultStore.state.darkMode) {
applyTheme(darkTheme.value);
} else {
applyTheme(lightTheme.value);
}
}
});

10
packages/frontend/src/components/MkAbuseReport.vue
View File

@@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkFolder>
<template #icon>
<i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--success)"></i>
<i v-else-if="report.resolved && report.resolvedAs === 'reject'" class="ti ti-x" style="color: var(--error)"></i>
<i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--MI_THEME-success)"></i>
<i v-else-if="report.resolved && report.resolvedAs === 'reject'" class="ti ti-x" style="color: var(--MI_THEME-error)"></i>
<i v-else-if="report.resolved" class="ti ti-slash"></i>
<i v-else class="ti ti-exclamation-circle" style="color: var(--warn)"></i>
<i v-else class="ti ti-exclamation-circle" style="color: var(--MI_THEME-warn)"></i>
</template>
<template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template>
<template #caption>{{ report.comment }}</template>
@@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #footer>
<div class="_buttons">
<template v-if="!report.resolved">
<MkButton @click="resolve('accept')"><i class="ti ti-check" style="color: var(--success)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.accept }})</MkButton>
<MkButton @click="resolve('reject')"><i class="ti ti-x" style="color: var(--error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</MkButton>
<MkButton @click="resolve('accept')"><i class="ti ti-check" style="color: var(--MI_THEME-success)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.accept }})</MkButton>
<MkButton @click="resolve('reject')"><i class="ti ti-x" style="color: var(--MI_THEME-error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</MkButton>
<MkButton @click="resolve(null)"><i class="ti ti-slash"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts.other }})</MkButton>
</template>
<template v-if="report.targetUser.host != null">

4
packages/frontend/src/components/MkAccountMoved.vue
View File

@@ -32,8 +32,8 @@ misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
.root {
padding: 16px;
font-size: 90%;
background: var(--infoWarnBg);
color: var(--error);
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-error);
border-radius: var(--radius);
}

6
packages/frontend/src/components/MkAnalogClock.vue
View File

@@ -193,12 +193,12 @@ tick();
function calcColors() {
const computedStyle = getComputedStyle(document.documentElement);
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
const dark = tinycolor(computedStyle.getPropertyValue('--MI_THEME-bg')).isDark();
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
sHandColor.value = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--MI_THEME-fg')).toHexString();
hHandColor.value = accent;
nowColor.value = accent;
}

8
packages/frontend/src/components/MkAnnouncementDialog.vue
View File

@@ -9,9 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.header">
<span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i>
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
</span>
<span :class="$style.title">{{ announcement.title }}</span>
</div>
@@ -83,7 +83,7 @@ onMounted(() => {
min-width: 320px;
max-width: 480px;
box-sizing: border-box;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
}

2
packages/frontend/src/components/MkAntennaEditor.vue
View File

@@ -170,6 +170,6 @@ function addUser() {
.actions {
margin-top: 16px;
padding: 24px 0;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

4
packages/frontend/src/components/MkAsUi.vue
View File

@@ -106,7 +106,7 @@ const containerStyle = computed(() => {
const border = isBordered ? {
borderWidth: c.borderWidth ?? '1px',
borderColor: c.borderColor ?? 'var(--divider)',
borderColor: c.borderColor ?? 'var(--MI_THEME-divider)',
borderStyle: c.borderStyle ?? 'solid',
} : undefined;
@@ -165,7 +165,7 @@ function openPostForm() {
}
.postForm {
background: var(--bg);
background: var(--MI_THEME-bg);
border-radius: 8px;
}
</style>

6
packages/frontend/src/components/MkAutocomplete.vue
View File

@@ -407,16 +407,16 @@ onBeforeUnmount(() => {
text-overflow: ellipsis;
&:hover {
background: var(--X3);
background: var(--MI_THEME-X3);
}
&[data-selected='true'] {
background: var(--accent);
background: var(--MI_THEME-accent);
color: #fff !important;
}
&:active {
background: var(--accentDarken);
background: var(--MI_THEME-accentDarken);
color: #fff !important;
}
}

22
packages/frontend/src/components/MkButton.vue
View File

@@ -129,7 +129,7 @@ function onMousedown(evt: MouseEvent): void {
font-size: 95%;
box-shadow: none;
text-decoration: none;
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
border-radius: 5px;
overflow: clip;
box-sizing: border-box;
@@ -140,11 +140,11 @@ function onMousedown(evt: MouseEvent): void {
}
&:not(:disabled):hover {
background: var(--buttonHoverBg);
background: var(--MI_THEME-buttonHoverBg);
}
&:not(:disabled):active {
background: var(--buttonHoverBg);
background: var(--MI_THEME-buttonHoverBg);
}
&.small {
@@ -167,15 +167,15 @@ function onMousedown(evt: MouseEvent): void {
&.primary {
font-weight: bold;
color: var(--fgOnAccent) !important;
background: var(--accent);
color: var(--MI_THEME-fgOnAccent) !important;
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));
}
}
@@ -216,15 +216,15 @@ function onMousedown(evt: MouseEvent): void {
&.gradate {
font-weight: bold;
color: var(--fgOnAccent) !important;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
color: var(--MI_THEME-fgOnAccent) !important;
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)));
}
}

16
packages/frontend/src/components/MkChannelFollowButton.vue
View File

@@ -68,9 +68,9 @@ async function onClick() {
position: relative;
display: inline-block;
font-weight: bold;
color: var(--accent);
color: var(--MI_THEME-accent);
background: transparent;
border: solid 1px var(--accent);
border: solid 1px var(--MI_THEME-accent);
padding: 0;
height: 31px;
font-size: 16px;
@@ -99,17 +99,17 @@ async function onClick() {
}
&.active {
color: var(--fgOnAccent);
background: var(--accent);
color: var(--MI_THEME-fgOnAccent);
background: var(--MI_THEME-accent);
&:hover {
background: var(--accentLighten);
border-color: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
border-color: var(--MI_THEME-accentLighten);
}
&:active {
background: var(--accentDarken);
border-color: var(--accentDarken);
background: var(--MI_THEME-accentDarken);
border-color: var(--MI_THEME-accentDarken);
}
}

12
packages/frontend/src/components/MkChannelPreview.vue
View File

@@ -100,7 +100,7 @@ const bannerStyle = computed(() => {
height: 100%;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--focus);
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
}
}
@@ -117,7 +117,7 @@ const bannerStyle = computed(() => {
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));
}
> .name {
@@ -148,7 +148,7 @@ const bannerStyle = computed(() => {
bottom: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.7);
color: var(--warn);
color: var(--MI_THEME-warn);
border-radius: 6px;
font-weight: bold;
font-size: 1em;
@@ -167,7 +167,7 @@ const bannerStyle = computed(() => {
> footer {
padding: 12px 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
> span {
opacity: 0.7;
@@ -213,8 +213,8 @@ const bannerStyle = computed(() => {
top: 0;
right: 0;
transform: translate(25%, -25%);
background-color: var(--accent);
border: solid var(--bg) 4px;
background-color: var(--MI_THEME-accent);
border: solid var(--MI_THEME-bg) 4px;
border-radius: 100%;
width: 1.5rem;
height: 1.5rem;

4
packages/frontend/src/components/MkChartLegend.vue
View File

@@ -53,11 +53,11 @@ defineExpose({
> .item {
font-size: 85%;
padding: 4px 12px 4px 8px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 999px;
&:hover {
border-color: var(--inputBorderHover);
border-color: var(--MI_THEME-inputBorderHover);
}
&.disabled {

6
packages/frontend/src/components/MkClipPreview.vue
View File

@@ -49,13 +49,13 @@ const remaining = computed(() => {
outline: none;
.root {
box-shadow: inset 0 0 0 2px var(--focus);
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
}
}
&:hover {
text-decoration: none;
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
@@ -65,7 +65,7 @@ const remaining = computed(() => {
.divider {
height: 1px;
background: var(--divider);
background: var(--MI_THEME-divider);
}
.description {

2
packages/frontend/src/components/MkCode.core.vue
View File

@@ -77,7 +77,7 @@ watch(() => props.lang, (to) => {
margin: .5em 0;
overflow: auto;
border-radius: 8px;
border: 1px solid var(--divider);
border: 1px solid var(--MI_THEME-divider);
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
color: var(--shiki-fallback);

6
packages/frontend/src/components/MkCode.vue
View File

@@ -71,7 +71,7 @@ function copy() {
.codeBlockFallbackRoot {
display: block;
overflow-wrap: anywhere;
background: var(--bg);
background: var(--MI_THEME-bg);
padding: 1em;
margin: .5em 0;
overflow: auto;
@@ -94,8 +94,8 @@ function copy() {
border-radius: 8px;
padding: 24px;
margin-top: 4px;
color: var(--fg);
background: var(--bg);
color: var(--MI_THEME-fg);
background: var(--MI_THEME-bg);
}
.codePlaceholderContainer {

14
packages/frontend/src/components/MkCodeEditor.vue
View File

@@ -140,7 +140,7 @@ watch(v, newValue => {
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
@@ -160,17 +160,17 @@ watch(v, newValue => {
margin: 0;
border-radius: 6px;
padding: 0;
color: var(--fg);
border: solid 1px var(--panel);
color: var(--MI_THEME-fg);
border: solid 1px var(--MI_THEME-panel);
transition: border-color 0.1s ease-out;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
&:hover {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}
.focused.codeEditorRoot {
border-color: var(--accent) !important;
border-color: var(--MI_THEME-accent) !important;
border-radius: 6px;
}
@@ -196,7 +196,7 @@ watch(v, newValue => {
resize: none;
text-align: left;
color: transparent;
caret-color: var(--fg);
caret-color: var(--MI_THEME-fg);
background-color: transparent;
border: 0;
border-radius: 6px;
@@ -211,6 +211,6 @@ watch(v, newValue => {
}
.textarea::selection {
color: var(--bg);
color: var(--MI_THEME-bg);
}
</style>

2
packages/frontend/src/components/MkCodeInline.vue
View File

@@ -18,7 +18,7 @@ const props = defineProps<{
display: inline-block;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
overflow-wrap: anywhere;
background: var(--bg);
background: var(--MI_THEME-bg);
padding: .1em;
border-radius: .3em;
}

14
packages/frontend/src/components/MkColorInput.vue
View File

@@ -60,7 +60,7 @@ const onInput = () => {
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
@@ -72,8 +72,8 @@ const onInput = () => {
&.focused {
> .inputCore {
border-color: var(--accent) !important;
//box-shadow: 0 0 0 4px var(--focus);
border-color: var(--MI_THEME-accent) !important;
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
@@ -98,9 +98,9 @@ const onInput = () => {
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
outline: none;
box-shadow: none;
@@ -108,7 +108,7 @@ const onInput = () => {
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}
</style>

12
packages/frontend/src/components/MkContainer.vue
View File

@@ -167,9 +167,9 @@ onUnmounted(() => {
position: sticky;
top: var(--stickyTop, 0px);
left: 0;
color: var(--panelHeaderFg);
background: var(--panelHeaderBg);
border-bottom: solid 0.5px var(--panelHeaderDivider);
color: var(--MI_THEME-panelHeaderFg);
background: var(--MI_THEME-panelHeaderBg);
border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
z-index: 2;
line-height: 1.4em;
}
@@ -216,11 +216,11 @@ onUnmounted(() => {
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;
@@ -229,7 +229,7 @@ onUnmounted(() => {
&:hover {
> .fadeLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
}

2
packages/frontend/src/components/MkCropperDialog.vue
View File

@@ -125,7 +125,7 @@ onMounted(() => {
const computedStyle = getComputedStyle(document.documentElement);
const selection = cropper.getCropperSelection()!;
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
selection.aspectRatio = props.aspectRatio;
selection.initialAspectRatio = props.aspectRatio;
selection.outlined = true;

6
packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
View File

@@ -85,7 +85,7 @@ function cancel() {
.emojiImgWrapper {
max-width: 100%;
height: 40cqh;
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--X5) 8px, var(--X5) 14px);
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
border-radius: var(--radius);
margin: auto;
overflow-y: hidden;
@@ -101,8 +101,8 @@ function cancel() {
display: inline-block;
word-break: break-all;
padding: 3px 10px;
background-color: var(--X5);
border: solid 1px var(--divider);
background-color: var(--MI_THEME-X5);
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius);
}
</style>

4
packages/frontend/src/components/MkDateSeparatedList.vue
View File

@@ -194,7 +194,7 @@ export default defineComponent({
box-shadow: none;
&:not(:last-child) {
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
}
}
@@ -235,7 +235,7 @@ export default defineComponent({
line-height: 32px;
text-align: center;
font-size: 12px;
color: var(--dateLabelFg);
color: var(--MI_THEME-dateLabelFg);
}
.date-1 {

8
packages/frontend/src/components/MkDialog.vue
View File

@@ -184,7 +184,7 @@ function onInputKeydown(evt: KeyboardEvent) {
max-width: 480px;
box-sizing: border-box;
text-align: center;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 16px;
}
@@ -206,15 +206,15 @@ function onInputKeydown(evt: KeyboardEvent) {
}
.type_success {
color: var(--success);
color: var(--MI_THEME-success);
}
.type_error {
color: var(--error);
color: var(--MI_THEME-error);
}
.type_warning {
color: var(--warn);
color: var(--MI_THEME-warn);
}
.title {

2
packages/frontend/src/components/MkDivider.vue
View File

@@ -27,6 +27,6 @@ defineProps<{
<style scoped lang="scss">
.default {
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
</style>

2
packages/frontend/src/components/MkDonation.vue
View File

@@ -79,7 +79,7 @@ function neverShow() {
text-align: center;
padding-top: 25px;
width: 100px;
color: var(--accent);
color: var(--MI_THEME-accent);
}
@media (max-width: 500px) {
.icon {

8
packages/frontend/src/components/MkDrive.file.vue
View File

@@ -148,14 +148,14 @@ function onDragend() {
}
&.isSelected {
background: var(--accent);
background: var(--MI_THEME-accent);
&:hover {
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
&:active {
background: var(--accentDarken);
background: var(--MI_THEME-accentDarken);
}
> .label {
@@ -244,7 +244,7 @@ function onDragend() {
font-size: 0.8em;
text-align: center;
word-break: break-all;
color: var(--fg);
color: var(--MI_THEME-fg);
overflow: hidden;
}
</style>

12
packages/frontend/src/components/MkDrive.folder.vue
View File

@@ -313,7 +313,7 @@ function onContextmenu(ev: MouseEvent) {
position: relative;
padding: 8px;
height: 64px;
background: var(--driveFolderBg);
background: var(--MI_THEME-driveFolderBg);
border-radius: 4px;
cursor: pointer;
@@ -326,7 +326,7 @@ function onContextmenu(ev: MouseEvent) {
right: -4px;
bottom: -4px;
left: -4px;
border: 2px dashed var(--focus);
border: 2px dashed var(--MI_THEME-focus);
border-radius: 4px;
}
}
@@ -345,13 +345,13 @@ function onContextmenu(ev: MouseEvent) {
width: 18px;
height: 18px;
background: #fff;
border: solid 2px var(--divider);
border: solid 2px var(--MI_THEME-divider);
border-radius: 4px;
box-sizing: border-box;
&.checked {
border-color: var(--accent);
background: var(--accent);
border-color: var(--MI_THEME-accent);
background: var(--MI_THEME-accent);
&::after {
content: "\ea5e";
@@ -368,7 +368,7 @@ function onContextmenu(ev: MouseEvent) {
}
&:hover {
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}

4
packages/frontend/src/components/MkDrive.vue
View File

@@ -721,7 +721,7 @@ onBeforeUnmount(() => {
box-sizing: border-box;
overflow: auto;
font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider);
box-shadow: 0 1px 0 var(--MI_THEME-divider);
user-select: none;
}
@@ -815,7 +815,7 @@ onBeforeUnmount(() => {
top: 38px;
width: 100%;
height: calc(100% - 38px);
border: dashed 2px var(--focus);
border: dashed 2px var(--MI_THEME-focus);
pointer-events: none;
}
</style>

4
packages/frontend/src/components/MkDriveFileThumbnail.vue
View File

@@ -69,7 +69,7 @@ const isThumbnailAvailable = computed(() => {
.root {
position: relative;
display: flex;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 8px;
overflow: clip;
}
@@ -83,7 +83,7 @@ const isThumbnailAvailable = computed(() => {
height: 100%;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 4px var(--warn);
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
}
.iconSub {

8
packages/frontend/src/components/MkEmbedCodeGenDialog.vue
View File

@@ -306,9 +306,9 @@ onUnmounted(() => {
.embedCodeGenPreviewRoot {
position: relative;
background-color: var(--bg);
background-color: var(--MI_THEME-bg);
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--panel) 6px, var(--panel) 12px);
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
cursor: not-allowed;
}
@@ -381,8 +381,8 @@ onUnmounted(() => {
.embedCodeGenResultHeadingIcon {
margin: 0 auto;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
text-align: center;
height: 64px;
width: 64px;

4
packages/frontend/src/components/MkEmojiPicker.section.vue
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--MI_THEME-divider);">
<header class="_acrylic" @click="shown = !shown">
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-icons"></i>:{{ emojis.length }})
</header>
@@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</section>
<!-- フォルダの中にはカスタム絵文字やフォルダがある -->
<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--MI_THEME-divider);">
<header class="_acrylic" @click="shown = !shown">
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder ti-fw"></i>:{{ customEmojiTree?.length }} <i class="ti ti-icons ti-fw"></i>:{{ emojis.length }})
</header>

24
packages/frontend/src/components/MkEmojiPicker.vue
View File

@@ -580,7 +580,7 @@ defineExpose({
&:disabled {
cursor: not-allowed;
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
opacity: 1;
> .emoji {
@@ -615,7 +615,7 @@ defineExpose({
&:disabled {
cursor: not-allowed;
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
opacity: 1;
> .emoji {
@@ -638,7 +638,7 @@ defineExpose({
outline: none;
border: none;
background: transparent;
color: var(--fg);
color: var(--MI_THEME-fg);
&:not(:focus):not(.filled) {
margin-bottom: env(safe-area-inset-bottom, 0px);
@@ -647,7 +647,7 @@ defineExpose({
&:not(.filled) {
order: 1;
z-index: 2;
box-shadow: 0px -1px 0 0px var(--divider);
box-shadow: 0px -1px 0 0px var(--MI_THEME-divider);
}
}
@@ -658,11 +658,11 @@ defineExpose({
> .tab {
flex: 1;
height: 38px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
&.active {
border-top: solid 1px var(--accent);
color: var(--accent);
border-top: solid 1px var(--MI_THEME-accent);
color: var(--MI_THEME-accent);
}
}
}
@@ -681,7 +681,7 @@ defineExpose({
> .group {
&:not(.index) {
padding: 4px 0 8px 0;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
> header {
@@ -708,7 +708,7 @@ defineExpose({
cursor: pointer;
&:hover {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
@@ -730,13 +730,13 @@ defineExpose({
}
&:active {
background: var(--accent);
background: var(--MI_THEME-accent);
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}
&:disabled {
cursor: not-allowed;
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
opacity: 1;
> .emoji {
@@ -757,7 +757,7 @@ defineExpose({
}
&.result {
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
&:empty {
display: none;

6
packages/frontend/src/components/MkExtensionInstaller.vue
View File

@@ -111,7 +111,7 @@ const emits = defineEmits<{
<style lang="scss" module>
.extInstallerRoot {
border-radius: var(--radius);
background: var(--panel);
background: var(--MI_THEME-panel);
padding: 1.5rem;
}
@@ -125,8 +125,8 @@ const emits = defineEmits<{
margin-left: auto;
margin-right: auto;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
.extInstallerTitle {

2
packages/frontend/src/components/MkFileListForAdmin.vue
View File

@@ -66,7 +66,7 @@ const props = defineProps<{
align-items: center;
&:hover {
color: var(--accent);
color: var(--MI_THEME-accent);
}
> .thumbnail {

4
packages/frontend/src/components/MkFlashPreview.vue
View File

@@ -36,7 +36,7 @@ const props = defineProps<{
&:hover {
text-decoration: none;
color: var(--accent);
color: var(--MI_THEME-accent);
}
&:focus-visible {
@@ -92,7 +92,7 @@ const props = defineProps<{
}
&:global(.gray) {
--c: var(--bg);
--c: var(--MI_THEME-bg);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-size: 16px 16px;
}

4
packages/frontend/src/components/MkFoldableSection.vue
View File

@@ -83,7 +83,7 @@ function afterLeave(element: Element) {
onMounted(() => {
function getParentBg(el?: HTMLElement | null): string {
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
if (el == null || el.tagName === 'BODY') return 'var(--MI_THEME-bg)';
const background = el.style.background || el.style.backgroundColor;
if (background) {
return background;
@@ -134,7 +134,7 @@ onMounted(() => {
flex: 1;
margin: auto;
height: 1px;
background: var(--divider);
background: var(--MI_THEME-divider);
}
.button {

24
packages/frontend/src/components/MkFolder.vue
View File

@@ -118,7 +118,7 @@ function toggle() {
onMounted(() => {
const computedStyle = getComputedStyle(document.documentElement);
const parentBg = getBgColor(rootEl.value!.parentElement!);
const myBg = computedStyle.getPropertyValue('--panel');
const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
bgSame.value = parentBg === myBg;
});
</script>
@@ -144,7 +144,7 @@ onMounted(() => {
width: 100%;
box-sizing: border-box;
padding: 9px 12px 9px 12px;
background: var(--folderHeaderBg);
background: var(--MI_THEME-folderHeaderBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-radius: 6px;
@@ -152,7 +152,7 @@ onMounted(() => {
&:hover {
text-decoration: none;
background: var(--folderHeaderHoverBg);
background: var(--MI_THEME-folderHeaderHoverBg);
}
&:focus-within {
@@ -160,8 +160,8 @@ onMounted(() => {
}
&.active {
color: var(--accent);
background: var(--folderHeaderHoverBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-folderHeaderHoverBg);
}
&.opened {
@@ -175,7 +175,7 @@ onMounted(() => {
}
.headerLower {
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
font-size: .85em;
padding-left: 4px;
}
@@ -209,13 +209,13 @@ onMounted(() => {
}
.headerTextSub {
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
font-size: .85em;
}
.headerRight {
margin-left: auto;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
white-space: nowrap;
}
@@ -224,12 +224,12 @@ onMounted(() => {
}
.body {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 0 0 6px 6px;
container-type: inline-size;
&.bgSame {
background: var(--bg);
background: var(--MI_THEME-bg);
}
}
@@ -239,11 +239,11 @@ onMounted(() => {
bottom: var(--stickyBottom, 0px);
left: 0;
padding: 12px;
background: var(--acrylicBg);
background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--panel) 5px, var(--panel) 10px);
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
border-radius: 0 0 6px 6px;
}
</style>

16
packages/frontend/src/components/MkFollowButton.vue
View File

@@ -165,8 +165,8 @@ onBeforeUnmount(() => {
position: relative;
display: inline-block;
font-weight: bold;
color: var(--fgOnWhite);
border: solid 1px var(--accent);
color: var(--MI_THEME-fgOnWhite);
border: solid 1px var(--MI_THEME-accent);
padding: 0;
height: 31px;
font-size: 16px;
@@ -201,17 +201,17 @@ onBeforeUnmount(() => {
}
&.active {
color: var(--fgOnAccent);
background: var(--accent);
color: var(--MI_THEME-fgOnAccent);
background: var(--MI_THEME-accent);
&:hover {
background: var(--accentLighten);
border-color: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
border-color: var(--MI_THEME-accentLighten);
}
&:active {
background: var(--accentDarken);
border-color: var(--accentDarken);
background: var(--MI_THEME-accentDarken);
border-color: var(--MI_THEME-accentDarken);
}
}

2
packages/frontend/src/components/MkFormDialog.file.vue
View File

@@ -66,6 +66,6 @@ function selectButton(ev: MouseEvent) {
<style module>
.fileNotSelected {
font-weight: 700;
color: var(--infoWarnFg);
color: var(--MI_THEME-infoWarnFg);
}
</style>

2
packages/frontend/src/components/MkFormFooter.vue
View File

@@ -36,7 +36,7 @@ const props = defineProps<{
}
.text {
color: var(--warn);
color: var(--MI_THEME-warn);
font-size: 90%;
animation: modified-blink 2s infinite;
}

4
packages/frontend/src/components/MkFukidashi.vue
View File

@@ -40,7 +40,7 @@ withDefaults(defineProps<{
<style module lang="scss">
.root {
--fukidashi-radius: var(--radius);
--fukidashi-bg: var(--panel);
--fukidashi-bg: var(--MI_THEME-panel);
position: relative;
display: inline-block;
@@ -48,7 +48,7 @@ withDefaults(defineProps<{
padding-top: calc(var(--fukidashi-radius) * .13);
&.shadow {
filter: drop-shadow(0 4px 32px var(--shadow));
filter: drop-shadow(0 4px 32px var(--MI_THEME-shadow));
}
&.left {

2
packages/frontend/src/components/MkGalleryPostPreview.vue
View File

@@ -75,7 +75,7 @@ function leaveHover(): void {
&:hover {
text-decoration: none;
color: var(--accent);
color: var(--MI_THEME-accent);
> .thumbnail {
transform: scale(1.1);

4
packages/frontend/src/components/MkGoogle.vue
View File

@@ -39,7 +39,7 @@ const search = () => {
width: 100%;
height: 40px;
font-size: 16px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 4px 0 0 4px;
-webkit-appearance: textfield;
}
@@ -48,7 +48,7 @@ const search = () => {
flex-shrink: 0;
margin: 0;
padding: 0 16px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-left: none;
border-radius: 0 4px 4px 0;

8
packages/frontend/src/components/MkInfo.vue
View File

@@ -36,14 +36,14 @@ function close() {
align-items: center;
padding: 12px 14px;
font-size: 90%;
background: var(--infoBg);
color: var(--infoFg);
background: var(--MI_THEME-infoBg);
color: var(--MI_THEME-infoFg);
border-radius: var(--radius);
white-space: pre-wrap;
&.warn {
background: var(--infoWarnBg);
color: var(--infoWarnFg);
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-infoWarnFg);
}
}

14
packages/frontend/src/components/MkInput.vue
View File

@@ -199,7 +199,7 @@ defineExpose({
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
@@ -216,8 +216,8 @@ defineExpose({
&.focused {
> .inputCore {
border-color: var(--accent) !important;
//box-shadow: 0 0 0 4px var(--focus);
border-color: var(--MI_THEME-accent) !important;
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
@@ -242,9 +242,9 @@ defineExpose({
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
outline: none;
box-shadow: none;
@@ -252,7 +252,7 @@ defineExpose({
transition: border-color 0.1s ease-out;
&:hover {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}

6
packages/frontend/src/components/MkInstanceCardMini.vue
View File

@@ -46,7 +46,7 @@ function getInstanceIcon(instance): string {
display: flex;
align-items: center;
padding: 16px;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 8px;
> :global(.icon) {
@@ -62,7 +62,7 @@ function getInstanceIcon(instance): string {
flex: 1;
overflow: hidden;
font-size: 0.9em;
color: var(--fg);
color: var(--MI_THEME-fg);
padding-right: 8px;
> :global(.host) {
@@ -109,7 +109,7 @@ function getInstanceIcon(instance): string {
}
&:global(.gray) {
--c: var(--bg);
--c: var(--MI_THEME-bg);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-size: 16px 16px;
}

4
packages/frontend/src/components/MkInstanceStats.vue
View File

@@ -121,7 +121,7 @@ function createDoughnut(chartEl, tooltip, data) {
labels: data.map(x => x.name),
datasets: [{
backgroundColor: data.map(x => x.color),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
borderWidth: 2,
hoverOffset: 0,
data: data.map(x => x.value),
@@ -256,7 +256,7 @@ onMounted(() => {
flex: 1;
min-width: 0;
position: relative;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
padding: 24px;
max-height: 300px;

4
packages/frontend/src/components/MkInviteCode.vue
View File

@@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ invite.code }}</template>
<template #suffix>
<span v-if="invite.used">{{ i18n.ts.used }}</span>
<span v-else-if="isExpired" style="color: var(--error)">{{ i18n.ts.expired }}</span>
<span v-else style="color: var(--success)">{{ i18n.ts.unused }}</span>
<span v-else-if="isExpired" style="color: var(--MI_THEME-error)">{{ i18n.ts.expired }}</span>
<span v-else style="color: var(--MI_THEME-success)">{{ i18n.ts.unused }}</span>
</template>
<template #footer>
<div class="_buttons">

6
packages/frontend/src/components/MkLaunchPad.vue
View File

@@ -105,8 +105,8 @@ function close() {
box-sizing: border-box;
&:hover {
color: var(--accent);
background: var(--accentedBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-accentedBg);
text-decoration: none;
}
@@ -137,7 +137,7 @@ function close() {
position: absolute;
top: 32px;
left: 32px;
color: var(--indicator);
color: var(--MI_THEME-indicator);
font-size: 8px;
animation: global-blink 1s infinite;

8
packages/frontend/src/components/MkMediaAudio.vue
View File

@@ -391,7 +391,7 @@ onDeactivated(() => {
.audioContainer {
container-type: inline-size;
position: relative;
border: .5px solid var(--divider);
border: .5px solid var(--MI_THEME-divider);
border-radius: var(--radius);
overflow: clip;
@@ -412,7 +412,7 @@ onDeactivated(() => {
height: 100%;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 4px var(--warn);
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
}
}
@@ -458,8 +458,8 @@ onDeactivated(() => {
font-size: 1.05rem;
&:hover {
color: var(--accent);
background-color: var(--accentedBg);
color: var(--MI_THEME-accent);
background-color: var(--MI_THEME-accentedBg);
}
&:focus-visible {

20
packages/frontend/src/components/MkMediaImage.vue
View File

@@ -42,7 +42,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>
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
@@ -165,7 +165,7 @@ function showMenu(ev: MouseEvent) {
height: 100%;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 4px var(--warn);
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
}
}
@@ -186,8 +186,8 @@ function showMenu(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;
@@ -206,19 +206,19 @@ function showMenu(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%);
}
.menu {
@@ -258,10 +258,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;

8
packages/frontend/src/components/MkMediaList.vue
View File

@@ -310,13 +310,13 @@ defineExpose({
:global(.pswp) {
--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
--pswp-bg: var(--modalBg) !important;
--pswp-bg: var(--MI_THEME-modalBg) !important;
}
</style>
<style lang="scss">
.pswp__bg {
background: var(--modalBg);
background: var(--MI_THEME-modalBg);
backdrop-filter: var(--modalBgFilter);
}
@@ -335,14 +335,14 @@ defineExpose({
}
.pswp__alt-text {
color: var(--fg);
color: var(--MI_THEME-fg);
margin: 0 auto;
text-align: center;
padding: var(--margin);
border-radius: var(--radius);
max-height: 8em;
overflow-y: auto;
text-shadow: var(--bg) 0 0 10px, var(--bg) 0 0 3px, var(--bg) 0 0 3px;
text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;
white-space: pre-line;
}
</style>

4
packages/frontend/src/components/MkMediaRange.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- Media系専用のinput range -->
<template>
<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--MI_THEME-scrollbarHandle);'">
<div :class="$style.controlsSeekbar">
<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
@@ -48,7 +48,7 @@ const modelValue = computed({
background: transparent;
border: 0;
border-radius: 26px;
color: var(--accent);
color: var(--MI_THEME-accent);
display: block;
height: 19px;
margin: 0;

18
packages/frontend/src/components/MkMediaVideo.vue
View File

@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
</div>
@@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
</div>
<div :class="$style.videoControls" @click.self="togglePlayPause">
<div :class="[$style.controlsChild, $style.controlsLeft]">
@@ -508,7 +508,7 @@ onDeactivated(() => {
height: 100%;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 4px var(--warn);
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
}
}
@@ -523,10 +523,10 @@ onDeactivated(() => {
}
.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;
@@ -537,8 +537,8 @@ onDeactivated(() => {
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;
@@ -592,7 +592,7 @@ onDeactivated(() => {
opacity: 0;
transition: opacity .4s ease-in-out;
background: var(--accent);
background: var(--MI_THEME-accent);
color: #fff;
padding: 1rem;
border-radius: 99rem;
@@ -663,7 +663,7 @@ onDeactivated(() => {
font-size: 1.05rem;
&:hover {
background-color: var(--accent);
background-color: var(--MI_THEME-accent);
}
&:focus-visible {

8
packages/frontend/src/components/MkMention.vue
View File

@@ -47,12 +47,12 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
display: inline-block;
padding: 4px 8px 4px 4px;
border-radius: 999px;
color: var(--mention);
background: color(from var(--mention) srgb r g b / 0.1);
color: var(--MI_THEME-mention);
background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
&.isMe {
color: var(--mentionMe);
background: color(from var(--mentionMe) srgb r g b / 0.1);
color: var(--MI_THEME-mentionMe);
background: color(from var(--MI_THEME-mentionMe) srgb r g b / 0.1);
}
}

32
packages/frontend/src/components/MkMenu.vue
View File

@@ -507,7 +507,7 @@ onBeforeUnmount(() => {
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none !important;
color: var(--menuFg, var(--fg));
color: var(--menuFg, var(--MI_THEME-fg));
&::before {
content: "";
@@ -527,7 +527,7 @@ onBeforeUnmount(() => {
outline: none;
&:not(:hover):not(:active)::before {
outline: var(--focus) solid 2px;
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
}
}
@@ -536,19 +536,19 @@ onBeforeUnmount(() => {
&:hover,
&:focus-visible:active,
&:focus-visible.active {
color: var(--menuHoverFg, var(--accent));
color: var(--menuHoverFg, var(--MI_THEME-accent));
&::before {
background-color: var(--menuHoverBg, var(--accentedBg));
background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
}
}
&:not(:focus-visible):active,
&:not(:focus-visible).active {
color: var(--menuActiveFg, var(--fgOnAccent));
color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
&::before {
background-color: var(--menuActiveBg, var(--accent));
background-color: var(--menuActiveBg, var(--MI_THEME-accent));
}
}
}
@@ -566,13 +566,13 @@ onBeforeUnmount(() => {
}
&.radio {
--menuActiveFg: var(--accent);
--menuActiveBg: var(--accentedBg);
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.parent {
--menuActiveFg: var(--accent);
--menuActiveBg: var(--accentedBg);
--menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--MI_THEME-accentedBg);
}
&.label {
@@ -637,14 +637,14 @@ onBeforeUnmount(() => {
.indicator {
display: flex;
align-items: center;
color: var(--indicator);
color: var(--MI_THEME-indicator);
font-size: 12px;
animation: global-blink 1s infinite;
}
.divider {
margin: 8px 0;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.radioIcon {
@@ -654,11 +654,11 @@ onBeforeUnmount(() => {
height: 1em;
vertical-align: -0.125em;
border-radius: 50%;
border: solid 2px var(--divider);
background-color: var(--panel);
border: solid 2px var(--MI_THEME-divider);
background-color: var(--MI_THEME-panel);
&.radioChecked {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
&::after {
content: "";
@@ -670,7 +670,7 @@ onBeforeUnmount(() => {
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--accent);
background-color: var(--MI_THEME-accent);
}
}
}

2
packages/frontend/src/components/MkMiniChart.vue
View File

@@ -48,7 +48,7 @@ const polygonPoints = ref('');
const headX = ref<number | null>(null);
const headY = ref<number | null>(null);
const clock = ref<number | null>(null);
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
const color = accent.toRgbString();
function draw(): void {

20
packages/frontend/src/components/MkModalWindow.vue
View File

@@ -94,8 +94,8 @@ defineExpose({
--root-margin: 24px;
--headerHeight: 46px;
--headerHeightNarrow: 42px;
--MI_THEME-headerHeight: 46px;
--MI_THEME-headerHeightNarrow: 42px;
@media (max-width: 500px) {
--root-margin: 16px;
@@ -105,24 +105,24 @@ defineExpose({
.header {
display: flex;
flex-shrink: 0;
background: var(--windowHeader);
background: var(--MI_THEME-windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
.headerButton {
height: var(--headerHeight);
width: var(--headerHeight);
height: var(--MI_THEME-headerHeight);
width: var(--MI_THEME-headerHeight);
@media (max-width: 500px) {
height: var(--headerHeightNarrow);
width: var(--headerHeightNarrow);
height: var(--MI_THEME-headerHeightNarrow);
width: var(--MI_THEME-headerHeightNarrow);
}
}
.title {
flex: 1;
line-height: var(--headerHeight);
line-height: var(--MI_THEME-headerHeight);
padding-left: 32px;
font-weight: bold;
white-space: nowrap;
@@ -131,7 +131,7 @@ defineExpose({
pointer-events: none;
@media (max-width: 500px) {
line-height: var(--headerHeightNarrow);
line-height: var(--MI_THEME-headerHeightNarrow);
padding-left: 16px;
}
}
@@ -143,7 +143,7 @@ defineExpose({
.body {
flex: 1;
overflow: auto;
background: var(--panel);
background: var(--MI_THEME-panel);
container-type: size;
}
</style>

28
packages/frontend/src/components/MkNote.vue
View File

@@ -126,8 +126,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-ban"></i>
</button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
@@ -643,7 +643,7 @@ function emitUpdReaction(emoji: string, delta: number) {
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;
}
@@ -666,9 +666,9 @@ function emitUpdReaction(emoji: string, delta: number) {
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 {
@@ -713,7 +713,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
& + .article {
padding-top: 8px;
@@ -836,7 +836,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.showLessLabel {
display: inline-block;
background: var(--popup);
background: var(--MI_THEME-popup);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
@@ -857,16 +857,16 @@ function emitUpdReaction(emoji: string, delta: number) {
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;
@@ -878,12 +878,12 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.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;
@@ -903,7 +903,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px;
overflow: clip;
}
@@ -927,7 +927,7 @@ function emitUpdReaction(emoji: string, delta: number) {
}
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}

34
packages/frontend/src/components/MkNoteDetailed.vue
View File

@@ -135,8 +135,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-ban"></i>
</button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></i>
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
@@ -569,7 +569,7 @@ function loadConversation() {
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;
}
@@ -591,7 +591,7 @@ function loadConversation() {
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
color: var(--MI_THEME-renote);
}
.renoteAvatar {
@@ -671,7 +671,7 @@ function loadConversation() {
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;
}
@@ -699,18 +699,18 @@ function loadConversation() {
}
.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);
}
.translation {
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
padding: 12px;
margin-top: 8px;
@@ -726,7 +726,7 @@ function loadConversation() {
.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px;
overflow: clip;
}
@@ -752,7 +752,7 @@ function loadConversation() {
}
&:hover {
color: var(--fgHighlighted);
color: var(--MI_THEME-fgHighlighted);
}
}
@@ -762,17 +762,17 @@ function loadConversation() {
opacity: 0.7;
&.reacted {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
.reply:not(:first-child) {
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.tabs {
border-top: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
display: flex;
}
@@ -784,7 +784,7 @@ function loadConversation() {
}
.tabActive {
border-bottom: solid 2px var(--accent);
border-bottom: solid 2px var(--MI_THEME-accent);
}
.tab_renotes {
@@ -804,12 +804,12 @@ function loadConversation() {
.reactionTab {
padding: 4px 6px;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: 6px;
}
.reactionTabActive {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
@container (max-width: 500px) {

2
packages/frontend/src/components/MkNoteHeader.vue
View File

@@ -78,7 +78,7 @@ const mock = inject<boolean>('mock', false);
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/src/components/MkNoteSub.vue
View File

@@ -135,7 +135,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;
}
@@ -156,7 +156,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;
}

6
packages/frontend/src/components/MkNotes.vue
View File

@@ -56,16 +56,16 @@ defineExpose({
.root {
&.noGap {
> .notes {
background: var(--panel);
background: var(--MI_THEME-panel);
}
}
&:not(.noGap) {
> .notes {
background: var(--bg);
background: var(--MI_THEME-bg);
.note {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
}
}

10
packages/frontend/src/components/MkNotification.vue
View File

@@ -224,7 +224,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
--eventFollow: #36aed2;
--eventRenote: #36d298;
--eventReply: #007aff;
--eventReactionHeart: var(--love);
--eventReactionHeart: var(--MI_THEME-love);
--eventReaction: #e99a0b;
--eventAchievement: #cb9a11;
--eventLogin: #007aff;
@@ -284,8 +284,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
height: 20px;
box-sizing: border-box;
border-radius: 100%;
background: var(--panel);
box-shadow: 0 0 0 3px var(--panel);
background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px;
text-align: center;
color: #fff;
@@ -437,8 +437,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
height: 20px;
box-sizing: border-box;
border-radius: 100%;
background: var(--panel);
box-shadow: 0 0 0 3px var(--panel);
background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px;
text-align: center;
color: #fff;

2
packages/frontend/src/components/MkNotifications.vue
View File

@@ -106,6 +106,6 @@ defineExpose({
<style lang="scss" module>
.list {
background: var(--panel);
background: var(--MI_THEME-panel);
}
</style>

4
packages/frontend/src/components/MkNumberDiff.vue
View File

@@ -24,11 +24,11 @@ const isZero = computed(() => props.value === 0);
<style lang="scss" module>
.isPlus {
color: var(--success);
color: var(--MI_THEME-success);
}
.isMinus {
color: var(--error);
color: var(--MI_THEME-error);
}
.isZero {

8
packages/frontend/src/components/MkObjectView.value.vue
View File

@@ -78,7 +78,7 @@ function collapsable(v): boolean {
> .boolean {
display: inline;
color: var(--codeBoolean);
color: var(--MI_THEME-codeBoolean);
&.true {
font-weight: bold;
@@ -91,12 +91,12 @@ function collapsable(v): boolean {
> .string {
display: inline;
color: var(--codeString);
color: var(--MI_THEME-codeString);
}
> .number {
display: inline;
color: var(--codeNumber);
color: var(--MI_THEME-codeNumber);
}
> .array.empty {
@@ -127,7 +127,7 @@ function collapsable(v): boolean {
> .toggle {
width: 16px;
color: var(--accent);
color: var(--MI_THEME-accent);
visibility: hidden;
&.visible {

6
packages/frontend/src/components/MkOmit.vue
View File

@@ -62,11 +62,11 @@ onUnmounted(() => {
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;
@@ -75,7 +75,7 @@ onUnmounted(() => {
&:hover {
> .fadeLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
}

6
packages/frontend/src/components/MkPagePreview.vue
View File

@@ -54,7 +54,7 @@ const props = defineProps<{
&:hover {
text-decoration: none;
color: var(--accent);
color: var(--MI_THEME-accent);
}
&:focus-within {
@@ -69,7 +69,7 @@ const props = defineProps<{
height: 100%;
border-radius: var(--radius);
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--focus);
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
}
}
@@ -80,7 +80,7 @@ const props = defineProps<{
}
> article {
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
padding: 16px;
border-radius: var(--radius);

2
packages/frontend/src/components/MkPageWindow.vue
View File

@@ -179,7 +179,7 @@ defineExpose({
overscroll-behavior: contain;
min-height: 100%;
background: var(--bg);
background: var(--MI_THEME-bg);
--margin: var(--marginHalf);
}

14
packages/frontend/src/components/MkPoll.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" @click="vote(i)">
<div :class="$style.bg" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></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>
<Mfm :text="choice.text" :plain="true"/>
<span v-if="showResult" style="margin-left: 4px; opacity: 0.7;">({{ i18n.tsx._poll.votesCount({ n: choice.votes }) }})</span>
</span>
@@ -114,8 +114,8 @@ const vote = async (id) => {
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;
cursor: pointer;
@@ -126,8 +126,8 @@ const vote = async (id) => {
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;
}
@@ -135,12 +135,12 @@ const vote = async (id) => {
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);
}
.done {

30
packages/frontend/src/components/MkPostForm.vue
View File

@@ -1113,7 +1113,7 @@ defineExpose({
outline: none;
.submitInner {
outline: 2px solid var(--fgOnAccent);
outline: 2px solid var(--MI_THEME-fgOnAccent);
outline-offset: -4px;
}
}
@@ -1128,13 +1128,13 @@ defineExpose({
&:not(:disabled):hover {
> .inner {
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 {
> .inner {
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)));
}
}
}
@@ -1156,8 +1156,8 @@ defineExpose({
border-radius: 6px;
min-width: 90px;
box-sizing: border-box;
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));
}
.headerRightItem {
@@ -1166,7 +1166,7 @@ defineExpose({
border-radius: 6px;
&:hover {
background: var(--X5);
background: var(--MI_THEME-X5);
}
&:disabled {
@@ -1218,7 +1218,7 @@ html[data-color-scheme=light] .preview {
.withQuote {
margin: 0 0 8px 0;
color: var(--accent);
color: var(--MI_THEME-accent);
}
.toSpecified {
@@ -1238,7 +1238,7 @@ html[data-color-scheme=light] .preview {
margin-right: 14px;
padding: 8px 0 8px 8px;
border-radius: 8px;
background: var(--X4);
background: var(--MI_THEME-X4);
}
.hasNotSpecifiedMentions {
@@ -1257,7 +1257,7 @@ html[data-color-scheme=light] .preview {
border: none;
border-radius: 0;
background: transparent;
color: var(--fg);
color: var(--MI_THEME-fg);
font-family: inherit;
&:focus {
@@ -1272,14 +1272,14 @@ html[data-color-scheme=light] .preview {
.cw {
z-index: 1;
padding-bottom: 8px;
border-bottom: solid 0.5px var(--divider);
border-bottom: solid 0.5px var(--MI_THEME-divider);
}
.hashtags {
z-index: 1;
padding-top: 8px;
padding-bottom: 8px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.textOuter {
@@ -1305,7 +1305,7 @@ html[data-color-scheme=light] .preview {
right: 2px;
padding: 4px 6px;
font-size: .9em;
color: var(--warn);
color: var(--MI_THEME-warn);
border-radius: 6px;
min-width: 1.6em;
text-align: center;
@@ -1349,16 +1349,16 @@ html[data-color-scheme=light] .preview {
border-radius: 6px;
&:hover {
background: var(--X5);
background: var(--MI_THEME-X5);
}
&.footerButtonActive {
color: var(--accent);
color: var(--MI_THEME-accent);
}
}
.previewButtonActive {
color: var(--accent);
color: var(--MI_THEME-accent);
}
@container (max-width: 500px) {

2
packages/frontend/src/components/MkPostFormAttaches.vue
View File

@@ -216,7 +216,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent | Keyboar
width: 100%;
height: 100%;
z-index: 1;
color: var(--fg);
color: var(--MI_THEME-fg);
}
.sensitive {

20
packages/frontend/src/components/MkRadio.vue
View File

@@ -53,9 +53,9 @@ function toggle(): void {
cursor: pointer;
padding: 7px 10px;
min-width: 60px;
background-color: var(--panel);
background-color: var(--MI_THEME-panel);
background-clip: padding-box !important;
border: solid 1px var(--panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
font-size: 90%;
transition: all 0.2s;
@@ -67,25 +67,25 @@ function toggle(): void {
}
&:hover {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
&:focus-within {
outline: none;
box-shadow: 0 0 0 2px var(--focus);
box-shadow: 0 0 0 2px var(--MI_THEME-focus);
}
&.checked {
background-color: var(--accentedBg) !important;
border-color: var(--accentedBg) !important;
color: var(--accent);
background-color: var(--MI_THEME-accentedBg) !important;
border-color: var(--MI_THEME-accentedBg) !important;
color: var(--MI_THEME-accent);
cursor: default !important;
> .button {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
&::after {
background-color: var(--accent);
background-color: var(--MI_THEME-accent);
transform: scale(1);
opacity: 1;
}
@@ -106,7 +106,7 @@ function toggle(): void {
width: 14px;
height: 14px;
background: none;
border: solid 2px var(--inputBorder);
border: solid 2px var(--MI_THEME-inputBorder);
border-radius: 100%;
transition: inherit;

2
packages/frontend/src/components/MkRadios.vue
View File

@@ -77,7 +77,7 @@ export default defineComponent({
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;

14
packages/frontend/src/components/MkRange.vue
View File

@@ -212,7 +212,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
@@ -224,8 +224,8 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .body {
padding: 7px 12px;
background: var(--panel);
border: solid 1px var(--panel);
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
> .container {
@@ -250,7 +250,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
top: 0;
left: 0;
height: 100%;
background: var(--accent);
background: var(--MI_THEME-accent);
opacity: 0.5;
}
}
@@ -272,7 +272,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
width: $tickWidth;
height: 3px;
margin-left: - math.div($tickWidth, 2);
background: var(--divider);
background: var(--MI_THEME-divider);
border-radius: 999px;
}
}
@@ -282,11 +282,11 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
width: $thumbWidth;
height: $thumbHeight;
cursor: grab;
background: var(--accent);
background: var(--MI_THEME-accent);
border-radius: 999px;
&:hover {
background: var(--accentLighten);
background: var(--MI_THEME-accentLighten);
}
}
}

2
packages/frontend/src/components/MkReactionEffect.vue
View File

@@ -60,7 +60,7 @@ onMounted(() => {
right: 0;
bottom: 0;
margin: auto;
color: var(--accent);
color: var(--MI_THEME-accent);
font-size: 18px;
font-weight: bold;
transform: translateY(-30px);

2
packages/frontend/src/components/MkReactionsViewer.details.vue
View File

@@ -57,7 +57,7 @@ function getReactionName(reaction: string): string {
max-width: 100px;
padding-right: 10px;
text-align: center;
border-right: solid 0.5px var(--divider);
border-right: solid 0.5px var(--MI_THEME-divider);
}
.reactionIcon {

10
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View File

@@ -180,7 +180,7 @@ if (!mock) {
justify-content: center;
&.canToggle {
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
&:hover {
background: rgba(0, 0, 0, 0.1);
@@ -214,12 +214,12 @@ if (!mock) {
}
&.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 {

6
packages/frontend/src/components/MkRemoteCaution.vue
View File

@@ -19,14 +19,14 @@ defineProps<{
.root {
font-size: 0.8em;
padding: 16px;
background: var(--infoWarnBg);
color: var(--infoWarnFg);
background: var(--MI_THEME-infoWarnBg);
color: var(--MI_THEME-infoWarnFg);
border-radius: var(--radius);
overflow: clip;
}
.link {
margin-left: 4px;
color: var(--accent);
color: var(--MI_THEME-accent);
}
</style>

2
packages/frontend/src/components/MkRetentionLineChart.vue
View File

@@ -44,7 +44,7 @@ onMounted(async () => {
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
const color = accent.toHex();
if (chartEl.value == null) return;

4
packages/frontend/src/components/MkRippleEffect.vue
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" cx="64" cy="64" style="stroke: var(--accent);">
<circle fill="none" cx="64" cy="64" style="stroke: var(--MI_THEME-accent);">
<animate
attributeName="r"
begin="0s" dur="0.5s"
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</circle>
<g fill="none" fill-rule="evenodd">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--accent);">
<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color" style="stroke: var(--MI_THEME-accent);">
<animate
attributeName="r"
begin="0s" dur="0.8s"

8
packages/frontend/src/components/MkRolePreview.vue
View File

@@ -6,8 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkA :to="forModeration ? `/admin/roles/${role.id}` : `/roles/${role.id}`" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
<template v-if="forModeration">
<i v-if="role.isPublic" class="ti ti-world" :class="$style.icon" style="color: var(--success)"></i>
<i v-else class="ti ti-lock" :class="$style.icon" style="color: var(--warn)"></i>
<i v-if="role.isPublic" class="ti ti-world" :class="$style.icon" style="color: var(--MI_THEME-success)"></i>
<i v-else class="ti ti-lock" :class="$style.icon" style="color: var(--MI_THEME-warn)"></i>
</template>
<div v-adaptive-bg class="_panel" :class="$style.body">
@@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<img :class="$style.bodyBadge" :src="role.iconUrl"/>
</template>
<template v-else>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--MI_THEME-accent);"></i>
<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--MI_THEME-accent);"></i>
<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
</template>
</span>

14
packages/frontend/src/components/MkSelect.vue
View File

@@ -202,7 +202,7 @@ function show() {
.caption {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
&:empty {
display: none;
@@ -220,8 +220,8 @@ function show() {
&.focused {
> .inputCore {
border-color: var(--accent) !important;
//box-shadow: 0 0 0 4px var(--focus);
border-color: var(--MI_THEME-accent) !important;
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
}
}
@@ -240,7 +240,7 @@ function show() {
&:hover {
> .inputCore {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}
}
@@ -256,9 +256,9 @@ function show() {
font: inherit;
font-weight: normal;
font-size: 1em;
color: var(--fg);
background: var(--panel);
border: solid 1px var(--panel);
color: var(--MI_THEME-fg);
background: var(--MI_THEME-panel);
border: solid 1px var(--MI_THEME-panel);
border-radius: 6px;
outline: none;
box-shadow: none;

10
packages/frontend/src/components/MkSignin.input.vue
View File

@@ -162,8 +162,8 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
.avatar {
margin: 0 auto;
background-color: color-mix(in srgb, var(--fg), transparent 85%);
color: color-mix(in srgb, var(--fg), transparent 25%);
background-color: color-mix(in srgb, var(--MI_THEME-fg), transparent 85%);
color: color-mix(in srgb, var(--MI_THEME-fg), transparent 25%);
text-align: center;
height: 64px;
width: 64px;
@@ -188,7 +188,7 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
margin: .4em auto;
width: 100%;
height: 1px;
background: var(--divider);
background: var(--MI_THEME-divider);
}
.orMsg {
@@ -196,9 +196,9 @@ async function specifyHostAndOpenRemote(options: OpenOnRemoteOptions): Promise<v
top: -.6em;
display: inline-block;
padding: 0 1em;
background: var(--panel);
background: var(--MI_THEME-panel);
font-size: 0.8em;
color: var(--fgOnPanel);
color: var(--MI_THEME-fgOnPanel);
margin: 0;
left: 50%;
transform: translateX(-50%);

4
packages/frontend/src/components/MkSignin.passkey.vue
View File

@@ -75,8 +75,8 @@ onMounted(() => {
.passkeyIcon {
margin: 0 auto;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
text-align: center;
height: 64px;
width: 64px;

6
packages/frontend/src/components/MkSignin.password.vue
View File

@@ -163,7 +163,7 @@ defineExpose({
margin: .4em auto;
width: 100%;
height: 1px;
background: var(--divider);
background: var(--MI_THEME-divider);
}
.orMsg {
@@ -171,9 +171,9 @@ defineExpose({
top: -.6em;
display: inline-block;
padding: 0 1em;
background: var(--panel);
background: var(--MI_THEME-panel);
font-size: 0.8em;
color: var(--fgOnPanel);
color: var(--MI_THEME-fgOnPanel);
margin: 0;
left: 50%;
transform: translateX(-50%);

4
packages/frontend/src/components/MkSignin.totp.vue
View File

@@ -57,8 +57,8 @@ const isBackupCode = ref(false);
.totpIcon {
margin: 0 auto;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
text-align: center;
height: 64px;
width: 64px;

2
packages/frontend/src/components/MkSignin.vue
View File

@@ -409,7 +409,7 @@ onBeforeUnmount(() => {
left: 0;
width: 100%;
height: 100%;
background-color: color-mix(in srgb, var(--panel), transparent 50%);
background-color: color-mix(in srgb, var(--MI_THEME-panel), transparent 50%);
display: flex;
justify-content: center;
align-items: center;

4
packages/frontend/src/components/MkSigninDialog.vue
View File

@@ -68,7 +68,7 @@ function onLogin(res) {
height: 100%;
max-height: 450px;
box-sizing: border-box;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
}
@@ -83,7 +83,7 @@ function onLogin(res) {
align-items: center;
font-weight: bold;
backdrop-filter: var(--blur, blur(15px));
background: var(--acrylicBg);
background: var(--MI_THEME-acrylicBg);
z-index: 1;
}

44
packages/frontend/src/components/MkSignupDialog.form.vue
View File

@@ -21,12 +21,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #caption>
<div><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.cannotBeChangedLater }}</div>
<span v-if="usernameState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooShort }}</span>
<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
<span v-else-if="usernameState === 'ok'" style="color: var(--MI_THEME-success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="usernameState === 'unavailable'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
<span v-else-if="usernameState === 'error'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
<span v-else-if="usernameState === 'invalid-format'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
<span v-else-if="usernameState === 'min-range'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooShort }}</span>
<span v-else-if="usernameState === 'max-range'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
</template>
</MkInput>
<MkInput v-if="instance.emailRequiredForSignup" v-model="email" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
@@ -34,32 +34,32 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #prefix><i class="ti ti-mail"></i></template>
<template #caption>
<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
<span v-else-if="emailState === 'unavailable:banned'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.banned }}</span>
<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
<span v-else-if="emailState === 'ok'" style="color: var(--MI_THEME-success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
<span v-else-if="emailState === 'unavailable:used'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
<span v-else-if="emailState === 'unavailable:format'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
<span v-else-if="emailState === 'unavailable:banned'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.banned }}</span>
<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
<span v-else-if="emailState === 'unavailable'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
<span v-else-if="emailState === 'error'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
</template>
</MkInput>
<MkInput v-model="password" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
<template #label>{{ i18n.ts.password }}</template>
<template #prefix><i class="ti ti-lock"></i></template>
<template #caption>
<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.weakPassword }}</span>
<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.normalPassword }}</span>
<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
<span v-if="passwordStrength == 'low'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.weakPassword }}</span>
<span v-if="passwordStrength == 'medium'" style="color: var(--MI_THEME-warn)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.normalPassword }}</span>
<span v-if="passwordStrength == 'high'" style="color: var(--MI_THEME-success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
</template>
</MkInput>
<MkInput v-model="retypedPassword" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
<template #prefix><i class="ti ti-lock"></i></template>
<template #caption>
<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.passwordMatched }}</span>
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
<span v-if="passwordRetypeState == 'match'" style="color: var(--MI_THEME-success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.passwordMatched }}</span>
<span v-if="passwordRetypeState == 'not-match'" style="color: var(--MI_THEME-error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
</template>
</MkInput>
<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :class="$style.captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
@@ -304,8 +304,8 @@ async function onSubmit(): Promise<void> {
padding: 16px;
text-align: center;
font-size: 26px;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
.captcha {

14
packages/frontend/src/components/MkSignupDialog.rules.vue
View File

@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder v-if="availableServerRules" :defaultOpen="true">
<template #label>{{ i18n.ts.serverRules }}</template>
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--success)"></i></template>
<template #suffix><i v-if="agreeServerRules" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<ol class="_gaps_s" :class="$style.rules">
<li v-for="item in instance.serverRules" :class="$style.rule"><div :class="$style.ruleText" v-html="item"></div></li>
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder v-if="availableTos || availablePrivacyPolicy" :defaultOpen="true">
<template #label>{{ tosPrivacyPolicyLabel }}</template>
<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--success)"></i></template>
<template #suffix><i v-if="agreeTosAndPrivacyPolicy" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<div class="_gaps_s">
<div v-if="availableTos"><a :href="instance.tosUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.termsOfService }} <i class="ti ti-external-link"></i></a></div>
<div v-if="availablePrivacyPolicy"><a :href="instance.privacyPolicyUrl ?? undefined" class="_link" target="_blank">{{ i18n.ts.privacyPolicy }} <i class="ti ti-external-link"></i></a></div>
@@ -43,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder :defaultOpen="true">
<template #label>{{ i18n.ts.basicNotesBeforeCreateAccount }}</template>
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--success)"></i></template>
<template #suffix><i v-if="agreeNote" class="ti ti-check" style="color: var(--MI_THEME-success)"></i></template>
<a href="https://misskey-hub.net/docs/for-users/onboarding/warning/" class="_link" target="_blank">{{ i18n.ts.basicNotesBeforeCreateAccount }} <i class="ti ti-external-link"></i></a>
@@ -150,8 +150,8 @@ async function updateAgreeNote(v: boolean) {
padding: 16px;
text-align: center;
font-size: 26px;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
}
.rules {
@@ -176,8 +176,8 @@ async function updateAgreeNote(v: boolean) {
width: 32px;
height: 32px;
line-height: 32px;
background-color: var(--accentedBg);
color: var(--accent);
background-color: var(--MI_THEME-accentedBg);
color: var(--MI_THEME-accent);
font-size: 13px;
font-weight: bold;
align-items: center;

2
packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
View File

@@ -77,7 +77,7 @@ function close() {
text-align: center;
padding-top: 25px;
width: 100px;
color: var(--accent);
color: var(--MI_THEME-accent);
}
@media (max-width: 500px) {
.icon {

12
packages/frontend/src/components/MkSubNoteContent.vue
View File

@@ -62,11 +62,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;
@@ -75,7 +75,7 @@ const collapsed = ref(isLong);
&:hover {
> .fadeLabel {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
}
}
@@ -84,13 +84,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 {
@@ -102,7 +102,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;

16
packages/frontend/src/components/MkSuperMenu.vue
View File

@@ -43,7 +43,7 @@ defineProps<{
& + .group {
margin-top: 16px;
padding-top: 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
> .title {
@@ -64,7 +64,7 @@ defineProps<{
&:hover {
text-decoration: none;
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
&:focus-visible {
@@ -72,12 +72,12 @@ defineProps<{
}
&.active {
color: var(--accent);
background: var(--accentedBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-accentedBg);
}
&.danger {
color: var(--error);
color: var(--MI_THEME-error);
}
> .icon {
@@ -128,10 +128,10 @@ defineProps<{
&:hover {
text-decoration: none;
background: none;
color: var(--accent);
color: var(--MI_THEME-accent);
> .icon {
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}
@@ -144,7 +144,7 @@ defineProps<{
width: 60px;
height: 60px;
aspect-ratio: 1;
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: 100%;
}

12
packages/frontend/src/components/MkSwitch.button.vue
View File

@@ -51,9 +51,9 @@ const toggle = () => {
width: calc(var(--height) * 1.6);
height: calc(var(--height) + 2px); // 枠線
outline: none;
background: var(--switchOffBg);
background: var(--MI_THEME-switchOffBg);
background-clip: content-box;
border: solid 1px var(--switchOffBg);
border: solid 1px var(--MI_THEME-switchOffBg);
border-radius: 999px;
cursor: pointer;
transition: inherit;
@@ -61,8 +61,8 @@ const toggle = () => {
}
.buttonChecked {
background-color: var(--switchOnBg) !important;
border-color: var(--switchOnBg) !important;
background-color: var(--MI_THEME-switchOnBg) !important;
border-color: var(--MI_THEME-switchOnBg) !important;
}
.buttonDisabled {
@@ -80,12 +80,12 @@ const toggle = () => {
&:not(.knobChecked) {
left: 3px;
background: var(--switchOffFg);
background: var(--MI_THEME-switchOffFg);
}
}
.knobChecked {
left: calc(calc(100% - var(--height)) + 3px);
background: var(--switchOnFg);
background: var(--MI_THEME-switchOnFg);
}
</style>

8
packages/frontend/src/components/MkSwitch.vue
View File

@@ -59,7 +59,7 @@ const toggle = () => {
&:hover {
> .button {
border-color: var(--inputBorderHover) !important;
border-color: var(--MI_THEME-inputBorderHover) !important;
}
}
@@ -77,7 +77,7 @@ const toggle = () => {
margin: 0;
&:focus-visible ~ .toggle {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
}
@@ -87,7 +87,7 @@ const toggle = () => {
margin-top: 2px;
display: block;
transition: inherit;
color: var(--fg);
color: var(--MI_THEME-fg);
}
.label {
@@ -99,7 +99,7 @@ const toggle = () => {
.caption {
margin: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
font-size: 0.85em;
&:empty {

6
packages/frontend/src/components/MkSystemWebhookEditor.vue
View File

@@ -261,8 +261,8 @@ onMounted(async () => {
bottom: 0;
left: 0;
padding: 12px;
border-top: solid 0.5px var(--divider);
background: var(--acrylicBg);
border-top: solid 0.5px var(--MI_THEME-divider);
background: var(--MI_THEME-acrylicBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
@@ -289,6 +289,6 @@ onMounted(async () => {
.description {
font-size: 0.85em;
padding: 8px 0 0 0;
color: var(--fgTransparentWeak);
color: var(--MI_THEME-fgTransparentWeak);
}
</style>

8
packages/frontend/src/components/MkTab.vue
View File

@@ -47,13 +47,13 @@ export default defineComponent({
}
&.active {
color: var(--accent);
background: var(--accentedBg);
color: var(--MI_THEME-accent);
background: var(--MI_THEME-accentedBg);
}
&:not(.active):hover {
color: var(--fgHighlighted);
background: var(--panelHighlight);
color: var(--MI_THEME-fgHighlighted);
background: var(--MI_THEME-panelHighlight);
}
&:not(:first-child) {

Some files were not shown because too many files have changed in this diff Show More