etc/Sharkey
0
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey synced 2024-11-25 23:45:13 +00:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
280 changed files with 1076 additions and 1093 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CONTRIBUTING.md
View file

@ -578,18 +578,18 @@ ESMではディレクトリインポートは廃止されているのと、デ
### Lighten CSS vars ### Lighten CSS vars
``` css ``` css
color: hsl(from var(--accent) h s calc(l + 10)); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
``` ```
### Darken CSS vars ### Darken CSS vars
``` css ``` css
color: hsl(from var(--accent) h s calc(l - 10)); color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
``` ```
### Add alpha to CSS vars ### Add alpha to CSS vars
``` css ``` css
color: color(from var(--accent) srgb r g b / 0.5); color: color(from var(--MI_THEME-accent) srgb r g b / 0.5);
``` ```

2
idea/MkDisableSection.vue
View file

@ -34,7 +34,7 @@ defineProps<{
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: not-allowed; cursor: not-allowed;
--color: color(from var(--error) srgb r g b / 0.25); --color: color(from var(--MI_THEME-error) srgb r g b / 0.25);
background-size: auto auto; background-size: auto auto;
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px); background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
} }

4
locales/index.d.ts vendored
View file

@ -7705,10 +7705,6 @@ export interface Locale extends ILocale {
* 入力ボックスの縁取り * 入力ボックスの縁取り
*/ */
"inputBorder": string; "inputBorder": string;
/**
* リスト項目の背景 (ホバー)
*/
"listItemHoverBg": string;
/** /**
* ドライブフォルダーの背景 * ドライブフォルダーの背景
*/ */

1
locales/ja-JP.yml
View file

@ -2018,7 +2018,6 @@ _theme:
buttonBg: "ボタンの背景" buttonBg: "ボタンの背景"
buttonHoverBg: "ボタンの背景 (ホバー)" buttonHoverBg: "ボタンの背景 (ホバー)"
inputBorder: "入力ボックスの縁取り" inputBorder: "入力ボックスの縁取り"
listItemHoverBg: "リスト項目の背景 (ホバー)"
driveFolderBg: "ドライブフォルダーの背景" driveFolderBg: "ドライブフォルダーの背景"
wallpaperOverlay: "壁紙のオーバーレイ" wallpaperOverlay: "壁紙のオーバーレイ"
badge: "バッジ" badge: "バッジ"

2
packages/backend/src/server/web/boot.js
View file

@ -98,7 +98,7 @@
const theme = localStorage.getItem('theme'); const theme = localStorage.getItem('theme');
if (theme) { if (theme) {
for (const [k, v] of Object.entries(JSON.parse(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 適用 // HTMLの theme-color 適用
if (k === 'htmlThemeColor') { if (k === 'htmlThemeColor') {

8
packages/backend/src/server/web/style.css
View file

@ -5,8 +5,8 @@
*/ */
html { html {
background-color: var(--bg); background-color: var(--MI_THEME-bg);
color: var(--fg); color: var(--MI_THEME-fg);
} }
#splash { #splash {
@ -17,7 +17,7 @@ html {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
cursor: wait; cursor: wait;
background-color: var(--bg); background-color: var(--MI_THEME-bg);
opacity: 1; opacity: 1;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
@ -45,7 +45,7 @@ html {
width: 28px; width: 28px;
height: 28px; height: 28px;
transform: translateY(70px); transform: translateY(70px);
color: var(--accent); color: var(--MI_THEME-accent);
} }
#splashSpinner > .spinner { #splashSpinner > .spinner {

10
packages/backend/src/server/web/style.embed.css
View file

@ -5,8 +5,8 @@
*/ */
html { html {
background-color: var(--bg); background-color: var(--MI_THEME-bg);
color: var(--fg); color: var(--MI_THEME-fg);
} }
html.embed { html.embed {
@ -24,7 +24,7 @@ html.embed {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
cursor: wait; cursor: wait;
background-color: var(--bg); background-color: var(--MI_THEME-bg);
opacity: 1; opacity: 1;
transition: opacity 0.5s ease; transition: opacity 0.5s ease;
} }
@ -33,7 +33,7 @@ html.embed #splash {
box-sizing: border-box; box-sizing: border-box;
min-height: 300px; min-height: 300px;
border-radius: var(--radius, 12px); border-radius: var(--radius, 12px);
border: 1px solid var(--divider, #e8e8e8); border: 1px solid var(--MI_THEME-divider, #e8e8e8);
} }
html.embed.norounded #splash { html.embed.norounded #splash {
@ -67,7 +67,7 @@ html.embed.noborder #splash {
width: 28px; width: 28px;
height: 28px; height: 28px;
transform: translateY(70px); transform: translateY(70px);
color: var(--accent); color: var(--MI_THEME-accent);
} }
#splashSpinner > .spinner { #splashSpinner > .spinner {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3
packages/frontend-shared/themes/_dark.json5
View file

@ -30,7 +30,7 @@
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel', windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel', popup: ':lighten<3<@panel',
@ -67,7 +67,6 @@
switchOnFg: '@accent', switchOnFg: '@accent',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
badge: '#31b1ce', badge: '#31b1ce',

3
packages/frontend-shared/themes/_light.json5
View file

@ -30,7 +30,7 @@
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel', windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel', popup: ':lighten<3<@panel',
@ -67,7 +67,6 @@
switchOnFg: '@fgOnAccent', switchOnFg: '@fgOnAccent',
inputBorder: 'rgba(0, 0, 0, 0.1)', inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)', inputBorderHover: 'rgba(0, 0, 0, 0.2)',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
badge: '#31b1ce', badge: '#31b1ce',

3
packages/frontend-shared/themes/d-astro.json5
View file

@ -36,7 +36,7 @@
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent', navIndicator: '@accent',
@ -50,7 +50,6 @@
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
fgOnWhite: '@accent', fgOnWhite: '@accent',
panelHighlight: ':lighten<3<@panel', panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',

3
packages/frontend-shared/themes/d-u0.json5
View file

@ -55,7 +55,7 @@
codeBoolean: '#c59eff', codeBoolean: '#c59eff',
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator', navIndicator: '@indicator',
@ -69,7 +69,6 @@
buttonGradateB: ':hue<20<@accent', buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel', panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',

3
packages/frontend-shared/themes/l-u0.json5
View file

@ -56,7 +56,7 @@
codeBoolean: '#c59eff', codeBoolean: '#c59eff',
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator', navIndicator: '@indicator',
@ -71,7 +71,6 @@
buttonGradateB: ':hue<20<@accent', buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel', panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: '#74747433', scrollbarHandle: '#74747433',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)', wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',

3
packages/frontend-shared/themes/l-vivid.json5
View file

@ -39,7 +39,7 @@
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(0, 0, 0, 0.1)', inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)', inputBorderHover: 'rgba(0, 0, 0, 0.2)',
panelBorder: '" solid 1px var(--divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent', accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel', acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent', navIndicator: '@accent',
@ -52,7 +52,6 @@
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
panelHighlight: ':darken<3<@panel', panelHighlight: ':darken<3<@panel',
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)', scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)', wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg', fgTransparentWeak: ':alpha<0.75<@fg',

2
packages/frontend/src/_dev_boot_.ts
View file

@ -43,7 +43,7 @@ async function main() {
const theme = localStorage.getItem('theme'); const theme = localStorage.getItem('theme');
if (theme) { if (theme) {
for (const [k, v] of Object.entries(JSON.parse(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 適用 // HTMLの theme-color 適用
if (k === 'htmlThemeColor') { 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.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme)); if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
defaultStore.set('themeInitial', false); 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> <template>
<MkFolder> <MkFolder>
<template #icon> <template #icon>
<i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--success)"></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(--error)"></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-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>
<template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template> <template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template>
<template #caption>{{ report.comment }}</template> <template #caption>{{ report.comment }}</template>
@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #footer> <template #footer>
<div class="_buttons"> <div class="_buttons">
<template v-if="!report.resolved"> <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('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(--error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</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> <MkButton @click="resolve(null)"><i class="ti ti-slash"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts.other }})</MkButton>
</template> </template>
<template v-if="report.targetUser.host != null"> <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 { .root {
padding: 16px; padding: 16px;
font-size: 90%; font-size: 90%;
background: var(--infoWarnBg); background: var(--MI_THEME-infoWarnBg);
color: var(--error); color: var(--MI_THEME-error);
border-radius: var(--radius); border-radius: var(--radius);
} }

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

@ -193,12 +193,12 @@ tick();
function calcColors() { function calcColors() {
const computedStyle = getComputedStyle(document.documentElement); const computedStyle = getComputedStyle(document.documentElement);
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark(); const dark = tinycolor(computedStyle.getPropertyValue('--MI_THEME-bg')).isDark();
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(); const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; 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)'; //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)'; 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; hHandColor.value = accent;
nowColor.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"> <div :class="$style.header">
<span :class="$style.icon"> <span :class="$style.icon">
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i> <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 === '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(--error);"></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(--success);"></i> <i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
</span> </span>
<span :class="$style.title">{{ announcement.title }}</span> <span :class="$style.title">{{ announcement.title }}</span>
</div> </div>
@ -83,7 +83,7 @@ onMounted(() => {
min-width: 320px; min-width: 320px;
max-width: 480px; max-width: 480px;
box-sizing: border-box; box-sizing: border-box;
background: var(--panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--radius);
} }

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

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

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

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

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

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

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

@ -129,7 +129,7 @@ function onMousedown(evt: MouseEvent): void {
font-size: 95%; font-size: 95%;
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--MI_THEME-buttonBg);
border-radius: 5px; border-radius: 5px;
overflow: clip; overflow: clip;
box-sizing: border-box; box-sizing: border-box;
@ -140,11 +140,11 @@ function onMousedown(evt: MouseEvent): void {
} }
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
&:not(:disabled):active { &:not(:disabled):active {
background: var(--buttonHoverBg); background: var(--MI_THEME-buttonHoverBg);
} }
&.small { &.small {
@ -167,15 +167,15 @@ function onMousedown(evt: MouseEvent): void {
&.primary { &.primary {
font-weight: bold; font-weight: bold;
color: var(--fgOnAccent) !important; color: var(--MI_THEME-fgOnAccent) !important;
background: var(--accent); background: var(--MI_THEME-accent);
&:not(:disabled):hover { &: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 { &: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 { &.gradate {
font-weight: bold; font-weight: bold;
color: var(--fgOnAccent) !important; color: var(--MI_THEME-fgOnAccent) !important;
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB)); background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
&:not(:disabled):hover { &: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 { &: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; position: relative;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
color: var(--accent); color: var(--MI_THEME-accent);
background: transparent; background: transparent;
border: solid 1px var(--accent); border: solid 1px var(--MI_THEME-accent);
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
@ -99,17 +99,17 @@ async function onClick() {
} }
&.active { &.active {
color: var(--fgOnAccent); color: var(--MI_THEME-fgOnAccent);
background: var(--accent); background: var(--MI_THEME-accent);
&:hover { &:hover {
background: var(--accentLighten); background: var(--MI_THEME-accentLighten);
border-color: var(--accentLighten); border-color: var(--MI_THEME-accentLighten);
} }
&:active { &:active {
background: var(--accentDarken); background: var(--MI_THEME-accentDarken);
border-color: var(--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%; height: 100%;
border-radius: inherit; border-radius: inherit;
pointer-events: none; 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; left: 0;
width: 100%; width: 100%;
height: 64px; 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 { > .name {
@ -148,7 +148,7 @@ const bannerStyle = computed(() => {
bottom: 16px; bottom: 16px;
left: 16px; left: 16px;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: var(--warn); color: var(--MI_THEME-warn);
border-radius: 6px; border-radius: 6px;
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
@ -167,7 +167,7 @@ const bannerStyle = computed(() => {
> footer { > footer {
padding: 12px 16px; padding: 12px 16px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
> span { > span {
opacity: 0.7; opacity: 0.7;
@ -213,8 +213,8 @@ const bannerStyle = computed(() => {
top: 0; top: 0;
right: 0; right: 0;
transform: translate(25%, -25%); transform: translate(25%, -25%);
background-color: var(--accent); background-color: var(--MI_THEME-accent);
border: solid var(--bg) 4px; border: solid var(--MI_THEME-bg) 4px;
border-radius: 100%; border-radius: 100%;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -167,9 +167,9 @@ onUnmounted(() => {
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
left: 0; left: 0;
color: var(--panelHeaderFg); color: var(--MI_THEME-panelHeaderFg);
background: var(--panelHeaderBg); background: var(--MI_THEME-panelHeaderBg);
border-bottom: solid 0.5px var(--panelHeaderDivider); border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
z-index: 2; z-index: 2;
line-height: 1.4em; line-height: 1.4em;
} }
@ -216,11 +216,11 @@ onUnmounted(() => {
left: 0; left: 0;
width: 100%; width: 100%;
height: 64px; 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 { > .fadeLabel {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: 999px;
@ -229,7 +229,7 @@ onUnmounted(() => {
&:hover { &:hover {
> .fadeLabel { > .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 computedStyle = getComputedStyle(document.documentElement);
const selection = cropper.getCropperSelection()!; 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.aspectRatio = props.aspectRatio;
selection.initialAspectRatio = props.aspectRatio; selection.initialAspectRatio = props.aspectRatio;
selection.outlined = true; selection.outlined = true;

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

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

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

@ -194,7 +194,7 @@ export default defineComponent({
box-shadow: none; box-shadow: none;
&:not(:last-child) { &: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; line-height: 32px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
color: var(--dateLabelFg); color: var(--MI_THEME-dateLabelFg);
} }
.date-1 { .date-1 {

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

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

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

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

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

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

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

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

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

@ -313,7 +313,7 @@ function onContextmenu(ev: MouseEvent) {
position: relative; position: relative;
padding: 8px; padding: 8px;
height: 64px; height: 64px;
background: var(--driveFolderBg); background: var(--MI_THEME-driveFolderBg);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -326,7 +326,7 @@ function onContextmenu(ev: MouseEvent) {
right: -4px; right: -4px;
bottom: -4px; bottom: -4px;
left: -4px; left: -4px;
border: 2px dashed var(--focus); border: 2px dashed var(--MI_THEME-focus);
border-radius: 4px; border-radius: 4px;
} }
} }
@ -345,13 +345,13 @@ function onContextmenu(ev: MouseEvent) {
width: 18px; width: 18px;
height: 18px; height: 18px;
background: #fff; background: #fff;
border: solid 2px var(--divider); border: solid 2px var(--MI_THEME-divider);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
&.checked { &.checked {
border-color: var(--accent); border-color: var(--MI_THEME-accent);
background: var(--accent); background: var(--MI_THEME-accent);
&::after { &::after {
content: "\ea5e"; content: "\ea5e";
@ -368,7 +368,7 @@ function onContextmenu(ev: MouseEvent) {
} }
&:hover { &: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; box-sizing: border-box;
overflow: auto; overflow: auto;
font-size: 0.9em; font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider); box-shadow: 0 1px 0 var(--MI_THEME-divider);
user-select: none; user-select: none;
} }
@ -815,7 +815,7 @@ onBeforeUnmount(() => {
top: 38px; top: 38px;
width: 100%; width: 100%;
height: calc(100% - 38px); height: calc(100% - 38px);
border: dashed 2px var(--focus); border: dashed 2px var(--MI_THEME-focus);
pointer-events: none; pointer-events: none;
} }
</style> </style>

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

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

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

@ -306,9 +306,9 @@ onUnmounted(() => {
.embedCodeGenPreviewRoot { .embedCodeGenPreviewRoot {
position: relative; position: relative;
background-color: var(--bg); background-color: var(--MI_THEME-bg);
background-size: auto auto; 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; cursor: not-allowed;
} }
@ -381,8 +381,8 @@ onUnmounted(() => {
.embedCodeGenResultHeadingIcon { .embedCodeGenResultHeadingIcon {
margin: 0 auto; margin: 0 auto;
background-color: var(--accentedBg); background-color: var(--MI_THEME-accentedBg);
color: var(--accent); color: var(--MI_THEME-accent);
text-align: center; text-align: center;
height: 64px; height: 64px;
width: 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> <template>
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと --> <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） --> <!-- フォルダの中にはカスタム絵文字だけ（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"> <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 }}) <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> </header>
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</section> </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"> <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 }}) <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> </header>

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

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

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

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

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

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

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

@ -36,7 +36,7 @@ const props = defineProps<{
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: var(--accent); color: var(--MI_THEME-accent);
} }
&:focus-visible { &:focus-visible {
@ -92,7 +92,7 @@ const props = defineProps<{
} }
&:global(.gray) { &: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-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; background-size: 16px 16px;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -199,7 +199,7 @@ defineExpose({
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--fgTransparentWeak); color: var(--MI_THEME-fgTransparentWeak);
&:empty { &:empty {
display: none; display: none;
@ -216,8 +216,8 @@ defineExpose({
&.focused { &.focused {
> .inputCore { > .inputCore {
border-color: var(--accent) !important; border-color: var(--MI_THEME-accent) !important;
//box-shadow: 0 0 0 4px var(--focus); //box-shadow: 0 0 0 4px var(--MI_THEME-focus);
} }
} }
@ -242,9 +242,9 @@ defineExpose({
font: inherit; font: inherit;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 1em;
color: var(--fg); color: var(--MI_THEME-fg);
background: var(--panel); background: var(--MI_THEME-panel);
border: solid 1px var(--panel); border: solid 1px var(--MI_THEME-panel);
border-radius: 6px; border-radius: 6px;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
@ -252,7 +252,7 @@ defineExpose({
transition: border-color 0.1s ease-out; transition: border-color 0.1s ease-out;
&:hover { &: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; display: flex;
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--panel); background: var(--MI_THEME-panel);
border-radius: 8px; border-radius: 8px;
> :global(.icon) { > :global(.icon) {
@ -62,7 +62,7 @@ function getInstanceIcon(instance): string {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
font-size: 0.9em; font-size: 0.9em;
color: var(--fg); color: var(--MI_THEME-fg);
padding-right: 8px; padding-right: 8px;
> :global(.host) { > :global(.host) {
@ -109,7 +109,7 @@ function getInstanceIcon(instance): string {
} }
&:global(.gray) { &: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-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; 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), labels: data.map(x => x.name),
datasets: [{ datasets: [{
backgroundColor: data.map(x => x.color), backgroundColor: data.map(x => x.color),
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'), borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
borderWidth: 2, borderWidth: 2,
hoverOffset: 0, hoverOffset: 0,
data: data.map(x => x.value), data: data.map(x => x.value),
@ -256,7 +256,7 @@ onMounted(() => {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
position: relative; position: relative;
background: var(--panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); border-radius: var(--radius);
padding: 24px; padding: 24px;
max-height: 300px; 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 #label>{{ invite.code }}</template>
<template #suffix> <template #suffix>
<span v-if="invite.used">{{ i18n.ts.used }}</span> <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-if="isExpired" style="color: var(--MI_THEME-error)">{{ i18n.ts.expired }}</span>
<span v-else style="color: var(--success)">{{ i18n.ts.unused }}</span> <span v-else style="color: var(--MI_THEME-success)">{{ i18n.ts.unused }}</span>
</template> </template>
<template #footer> <template #footer>
<div class="_buttons"> <div class="_buttons">

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

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

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

@ -391,7 +391,7 @@ onDeactivated(() => {
.audioContainer { .audioContainer {
container-type: inline-size; container-type: inline-size;
position: relative; position: relative;
border: .5px solid var(--divider); border: .5px solid var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--radius);
overflow: clip; overflow: clip;
@ -412,7 +412,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
border-radius: inherit; 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; font-size: 1.05rem;
&:hover { &:hover {
color: var(--accent); color: var(--MI_THEME-accent);
background-color: var(--accentedBg); background-color: var(--MI_THEME-accentedBg);
} }
&:focus-visible { &: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 :class="$style.indicators">
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div> <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.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> </div>
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button> <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> <i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
@ -165,7 +165,7 @@ function showMenu(ev: MouseEvent) {
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
border-radius: inherit; 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; display: block;
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
background-color: var(--fg); background-color: var(--MI_THEME-fg);
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 12px; font-size: 12px;
opacity: .5; opacity: .5;
padding: 5px 8px; padding: 5px 8px;
@ -206,19 +206,19 @@ function showMenu(ev: MouseEvent) {
.visible { .visible {
position: relative; position: relative;
//box-shadow: 0 0 0 1px var(--divider) inset; //box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
background: var(--bg); background: var(--MI_THEME-bg);
background-size: 16px 16px; background-size: 16px 16px;
} }
html[data-color-scheme=dark] .visible { html[data-color-scheme=dark] .visible {
--c: rgb(255 255 255 / 2%); --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 { html[data-color-scheme=light] .visible {
--c: rgb(0 0 0 / 2%); --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 { .menu {
@ -258,10 +258,10 @@ html[data-color-scheme=light] .visible {
} }
.indicator { .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; background-color: black;
border-radius: 6px; border-radius: 6px;
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;

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

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

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

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<!-- Media系専用のinput range --> <!-- Media系専用のinput range -->
<template> <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"> <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> <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)"/> <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; background: transparent;
border: 0; border: 0;
border-radius: 26px; border-radius: 26px;
color: var(--accent); color: var(--MI_THEME-accent);
display: block; display: block;
height: 19px; height: 19px;
margin: 0; 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> <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators"> <div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div> <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>
</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> <i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
<div :class="$style.indicators"> <div :class="$style.indicators">
<div v-if="video.comment" :class="$style.indicator">ALT</div> <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>
<div :class="$style.videoControls" @click.self="togglePlayPause"> <div :class="$style.videoControls" @click.self="togglePlayPause">
<div :class="[$style.controlsChild, $style.controlsLeft]"> <div :class="[$style.controlsChild, $style.controlsLeft]">
@ -508,7 +508,7 @@ onDeactivated(() => {
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
border-radius: inherit; 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 { .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; background-color: black;
border-radius: 6px; border-radius: 6px;
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;
@ -537,8 +537,8 @@ onDeactivated(() => {
display: block; display: block;
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
background-color: var(--fg); background-color: var(--MI_THEME-fg);
color: var(--accentLighten); color: var(--MI_THEME-accentLighten);
font-size: 12px; font-size: 12px;
opacity: .5; opacity: .5;
padding: 5px 8px; padding: 5px 8px;
@ -592,7 +592,7 @@ onDeactivated(() => {
opacity: 0; opacity: 0;
transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;
background: var(--accent); background: var(--MI_THEME-accent);
color: #fff; color: #fff;
padding: 1rem; padding: 1rem;
border-radius: 99rem; border-radius: 99rem;
@ -663,7 +663,7 @@ onDeactivated(() => {
font-size: 1.05rem; font-size: 1.05rem;
&:hover { &:hover {
background-color: var(--accent); background-color: var(--MI_THEME-accent);
} }
&:focus-visible { &:focus-visible {

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

@ -47,12 +47,12 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
display: inline-block; display: inline-block;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
border-radius: 999px; border-radius: 999px;
color: var(--mention); color: var(--MI_THEME-mention);
background: color(from var(--mention) srgb r g b / 0.1); background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
&.isMe { &.isMe {
color: var(--mentionMe); color: var(--MI_THEME-mentionMe);
background: color(from var(--mentionMe) srgb r g b / 0.1); 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; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-decoration: none !important; text-decoration: none !important;
color: var(--menuFg, var(--fg)); color: var(--menuFg, var(--MI_THEME-fg));
&::before { &::before {
content: ""; content: "";
@ -527,7 +527,7 @@ onBeforeUnmount(() => {
outline: none; outline: none;
&:not(:hover):not(:active)::before { &:not(:hover):not(:active)::before {
outline: var(--focus) solid 2px; outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px; outline-offset: -2px;
} }
} }
@ -536,19 +536,19 @@ onBeforeUnmount(() => {
&:hover, &:hover,
&:focus-visible:active, &:focus-visible:active,
&:focus-visible.active { &:focus-visible.active {
color: var(--menuHoverFg, var(--accent)); color: var(--menuHoverFg, var(--MI_THEME-accent));
&::before { &::before {
background-color: var(--menuHoverBg, var(--accentedBg)); background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
} }
} }
&:not(:focus-visible):active, &:not(:focus-visible):active,
&:not(:focus-visible).active { &:not(:focus-visible).active {
color: var(--menuActiveFg, var(--fgOnAccent)); color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
&::before { &::before {
background-color: var(--menuActiveBg, var(--accent)); background-color: var(--menuActiveBg, var(--MI_THEME-accent));
} }
} }
} }
@ -566,13 +566,13 @@ onBeforeUnmount(() => {
} }
&.radio { &.radio {
--menuActiveFg: var(--accent); --menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--accentedBg); --menuActiveBg: var(--MI_THEME-accentedBg);
} }
&.parent { &.parent {
--menuActiveFg: var(--accent); --menuActiveFg: var(--MI_THEME-accent);
--menuActiveBg: var(--accentedBg); --menuActiveBg: var(--MI_THEME-accentedBg);
} }
&.label { &.label {
@ -637,14 +637,14 @@ onBeforeUnmount(() => {
.indicator { .indicator {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--indicator); color: var(--MI_THEME-indicator);
font-size: 12px; font-size: 12px;
animation: global-blink 1s infinite; animation: global-blink 1s infinite;
} }
.divider { .divider {
margin: 8px 0; margin: 8px 0;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }
.radioIcon { .radioIcon {
@ -654,11 +654,11 @@ onBeforeUnmount(() => {
height: 1em; height: 1em;
vertical-align: -0.125em; vertical-align: -0.125em;
border-radius: 50%; border-radius: 50%;
border: solid 2px var(--divider); border: solid 2px var(--MI_THEME-divider);
background-color: var(--panel); background-color: var(--MI_THEME-panel);
&.radioChecked { &.radioChecked {
border-color: var(--accent); border-color: var(--MI_THEME-accent);
&::after { &::after {
content: ""; content: "";
@ -670,7 +670,7 @@ onBeforeUnmount(() => {
width: 50%; width: 50%;
height: 50%; height: 50%;
border-radius: 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 headX = ref<number | null>(null);
const headY = ref<number | null>(null); const headY = ref<number | null>(null);
const clock = 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(); const color = accent.toRgbString();
function draw(): void { function draw(): void {

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

@ -94,8 +94,8 @@ defineExpose({
--root-margin: 24px; --root-margin: 24px;
--headerHeight: 46px; --MI_THEME-headerHeight: 46px;
--headerHeightNarrow: 42px; --MI_THEME-headerHeightNarrow: 42px;
@media (max-width: 500px) { @media (max-width: 500px) {
--root-margin: 16px; --root-margin: 16px;
@ -105,24 +105,24 @@ defineExpose({
.header { .header {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
background: var(--windowHeader); background: var(--MI_THEME-windowHeader);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
} }
.headerButton { .headerButton {
height: var(--headerHeight); height: var(--MI_THEME-headerHeight);
width: var(--headerHeight); width: var(--MI_THEME-headerHeight);
@media (max-width: 500px) { @media (max-width: 500px) {
height: var(--headerHeightNarrow); height: var(--MI_THEME-headerHeightNarrow);
width: var(--headerHeightNarrow); width: var(--MI_THEME-headerHeightNarrow);
} }
} }
.title { .title {
flex: 1; flex: 1;
line-height: var(--headerHeight); line-height: var(--MI_THEME-headerHeight);
padding-left: 32px; padding-left: 32px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
@ -131,7 +131,7 @@ defineExpose({
pointer-events: none; pointer-events: none;
@media (max-width: 500px) { @media (max-width: 500px) {
line-height: var(--headerHeightNarrow); line-height: var(--MI_THEME-headerHeightNarrow);
padding-left: 16px; padding-left: 16px;
} }
} }
@ -143,7 +143,7 @@ defineExpose({
.body { .body {
flex: 1; flex: 1;
overflow: auto; overflow: auto;
background: var(--panel); background: var(--MI_THEME-panel);
container-type: size; container-type: size;
} }
</style> </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> <i class="ti ti-ban"></i>
</button> </button>
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()"> <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-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(--accent);"></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-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></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> <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; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--radius);
box-sizing: border-box; box-sizing: border-box;
} }
@ -666,9 +666,9 @@ function emitUpdReaction(emoji: string, delta: number) {
right: 12px; right: 12px;
padding: 0 4px; padding: 0 4px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
background: var(--popup); background: var(--MI_THEME-popup);
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 4px 32px var(--shadow); box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
} }
.footerButton { .footerButton {
@ -713,7 +713,7 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 16px 32px 8px 32px; padding: 16px 32px 8px 32px;
line-height: 28px; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--renote); color: var(--MI_THEME-renote);
& + .article { & + .article {
padding-top: 8px; padding-top: 8px;
@ -836,7 +836,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.showLessLabel { .showLessLabel {
display: inline-block; display: inline-block;
background: var(--popup); background: var(--MI_THEME-popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: 999px;
@ -857,16 +857,16 @@ function emitUpdReaction(emoji: string, delta: number) {
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: 64px; 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 { &:hover > .collapsedLabel {
background: var(--panelHighlight); background: var(--MI_THEME-panelHighlight);
} }
} }
.collapsedLabel { .collapsedLabel {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--MI_THEME-panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: 999px;
@ -878,12 +878,12 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.replyIcon { .replyIcon {
color: var(--accent); color: var(--MI_THEME-accent);
margin-right: 0.5em; margin-right: 0.5em;
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
@ -903,7 +903,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px; border-radius: 8px;
overflow: clip; overflow: clip;
} }
@ -927,7 +927,7 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
&:hover { &: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> <i class="ti ti-ban"></i>
</button> </button>
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()"> <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-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(--accent);"></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-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
<i v-else class="ti ti-plus"></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> <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; margin: auto;
width: calc(100% - 8px); width: calc(100% - 8px);
height: calc(100% - 8px); height: calc(100% - 8px);
border: dashed 2px var(--focus); border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius); border-radius: var(--radius);
box-sizing: border-box; box-sizing: border-box;
} }
@ -591,7 +591,7 @@ function loadConversation() {
padding: 16px 32px 8px 32px; padding: 16px 32px 8px 32px;
line-height: 28px; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--renote); color: var(--MI_THEME-renote);
} }
.renoteAvatar { .renoteAvatar {
@ -671,7 +671,7 @@ function loadConversation() {
padding: 4px 6px; padding: 4px 6px;
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: 4px; border-radius: 4px;
} }
@ -699,18 +699,18 @@ function loadConversation() {
} }
.noteReplyTarget { .noteReplyTarget {
color: var(--accent); color: var(--MI_THEME-accent);
margin-right: 0.5em; margin-right: 0.5em;
} }
.rn { .rn {
margin-left: 4px; margin-left: 4px;
font-style: oblique; font-style: oblique;
color: var(--renote); color: var(--MI_THEME-renote);
} }
.translation { .translation {
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius); border-radius: var(--radius);
padding: 12px; padding: 12px;
margin-top: 8px; margin-top: 8px;
@ -726,7 +726,7 @@ function loadConversation() {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--MI_THEME-renote);
border-radius: 8px; border-radius: 8px;
overflow: clip; overflow: clip;
} }
@ -752,7 +752,7 @@ function loadConversation() {
} }
&:hover { &:hover {
color: var(--fgHighlighted); color: var(--MI_THEME-fgHighlighted);
} }
} }
@ -762,17 +762,17 @@ function loadConversation() {
opacity: 0.7; opacity: 0.7;
&.reacted { &.reacted {
color: var(--accent); color: var(--MI_THEME-accent);
} }
} }
.reply:not(:first-child) { .reply:not(:first-child) {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
} }
.tabs { .tabs {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--MI_THEME-divider);
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--MI_THEME-divider);
display: flex; display: flex;
} }
@ -784,7 +784,7 @@ function loadConversation() {
} }
.tabActive { .tabActive {
border-bottom: solid 2px var(--accent); border-bottom: solid 2px var(--MI_THEME-accent);
} }
.tab_renotes { .tab_renotes {
@ -804,12 +804,12 @@ function loadConversation() {
.reactionTab { .reactionTab {
padding: 4px 6px; padding: 4px 6px;
border: solid 1px var(--divider); border: solid 1px var(--MI_THEME-divider);
border-radius: 6px; border-radius: 6px;
} }
.reactionTabActive { .reactionTabActive {
border-color: var(--accent); border-color: var(--MI_THEME-accent);
} }
@container (max-width: 500px) { @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; margin: 0 .5em 0 0;
padding: 1px 6px; padding: 1px 6px;
font-size: 80%; font-size: 80%;
border: solid 0.5px var(--divider); border: solid 0.5px var(--MI_THEME-divider);
border-radius: 3px; border-radius: 3px;
} }

4
packages/frontend/src/components/MkNoteSub.vue
View file

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

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

@ -56,16 +56,16 @@ defineExpose({
.root { .root {
&.noGap { &.noGap {
> .notes { > .notes {
background: var(--panel); background: var(--MI_THEME-panel);
} }
} }
&:not(.noGap) { &:not(.noGap) {
> .notes { > .notes {
background: var(--bg); background: var(--MI_THEME-bg);
.note { .note {
background: var(--panel); background: var(--MI_THEME-panel);
border-radius: var(--radius); 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; --eventFollow: #36aed2;
--eventRenote: #36d298; --eventRenote: #36d298;
--eventReply: #007aff; --eventReply: #007aff;
--eventReactionHeart: var(--love); --eventReactionHeart: var(--MI_THEME-love);
--eventReaction: #e99a0b; --eventReaction: #e99a0b;
--eventAchievement: #cb9a11; --eventAchievement: #cb9a11;
--eventLogin: #007aff; --eventLogin: #007aff;
@ -284,8 +284,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 100%; border-radius: 100%;
background: var(--panel); background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
color: #fff; color: #fff;
@ -437,8 +437,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 100%; border-radius: 100%;
background: var(--panel); background: var(--MI_THEME-panel);
box-shadow: 0 0 0 3px var(--panel); box-shadow: 0 0 0 3px var(--MI_THEME-panel);
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
color: #fff; color: #fff;

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