refactor(frontend): prefix css variables (#14725)
* wip * Update index.d.ts * remove unnecessary codes
This commit is contained in:
syuilo
GitHub
parent
0ad31bd5d4
commit
4a356f1ba7
|
|
@ -578,18 +578,18 @@ ESMではディレクトリインポートは廃止されているのと、デ
|
|||
### Lighten CSS vars
|
||||
|
||||
``` 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
|
||||
|
||||
``` 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
|
||||
|
||||
``` 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);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ defineProps<{
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
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-image: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--color) 4px, var(--color) 14px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7705,10 +7705,6 @@ export interface Locale extends ILocale {
|
|||
* 入力ボックスの縁取り
|
||||
*/
|
||||
"inputBorder": string;
|
||||
/**
|
||||
* リスト項目の背景 (ホバー)
|
||||
*/
|
||||
"listItemHoverBg": string;
|
||||
/**
|
||||
* ドライブフォルダーの背景
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -2018,7 +2018,6 @@ _theme:
|
|||
buttonBg: "ボタンの背景"
|
||||
buttonHoverBg: "ボタンの背景 (ホバー)"
|
||||
inputBorder: "入力ボックスの縁取り"
|
||||
listItemHoverBg: "リスト項目の背景 (ホバー)"
|
||||
driveFolderBg: "ドライブフォルダーの背景"
|
||||
wallpaperOverlay: "壁紙のオーバーレイ"
|
||||
badge: "バッジ"
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
const theme = localStorage.getItem('theme');
|
||||
if (theme) {
|
||||
for (const [k, v] of Object.entries(JSON.parse(theme))) {
|
||||
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||||
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
||||
|
||||
// HTMLの theme-color 適用
|
||||
if (k === 'htmlThemeColor') {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
color: var(--MI_THEME-fg);
|
||||
}
|
||||
|
||||
#splash {
|
||||
|
|
@ -17,7 +17,7 @@ html {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: wait;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ html {
|
|||
width: 28px;
|
||||
height: 28px;
|
||||
transform: translateY(70px);
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
#splashSpinner > .spinner {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
|
||||
html {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
color: var(--MI_THEME-fg);
|
||||
}
|
||||
|
||||
html.embed {
|
||||
|
|
@ -24,7 +24,7 @@ html.embed {
|
|||
width: 100vw;
|
||||
height: 100vh;
|
||||
cursor: wait;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@ html.embed #splash {
|
|||
box-sizing: border-box;
|
||||
min-height: 300px;
|
||||
border-radius: var(--radius, 12px);
|
||||
border: 1px solid var(--divider, #e8e8e8);
|
||||
border: 1px solid var(--MI_THEME-divider, #e8e8e8);
|
||||
}
|
||||
|
||||
html.embed.norounded #splash {
|
||||
|
|
@ -67,7 +67,7 @@ html.embed.noborder #splash {
|
|||
width: 28px;
|
||||
height: 28px;
|
||||
transform: translateY(70px);
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
#splashSpinner > .spinner {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
|
|||
--size: 38px;
|
||||
|
||||
&.colored {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&.inline {
|
||||
|
|
|
|||
|
|
@ -33,15 +33,15 @@ defineProps<{
|
|||
width: 100%;
|
||||
padding: var(--margin);
|
||||
margin-top: 4px;
|
||||
border: 1px solid var(--inputBorder);
|
||||
border: 1px solid var(--MI_THEME-inputBorder);
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--panel);
|
||||
background-color: var(--MI_THEME-panel);
|
||||
transition: background-color .1s, border-color .1s;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: var(--inputBorderHover);
|
||||
background-color: var(--buttonHoverBg);
|
||||
border-color: var(--MI_THEME-inputBorderHover);
|
||||
background-color: var(--MI_THEME-buttonHoverBg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.indicators">
|
||||
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
|
||||
<div v-if="image.comment" :class="$style.indicator">ALT</div>
|
||||
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
</div>
|
||||
<i v-if="!hide" class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
|
||||
</div>
|
||||
|
|
@ -94,8 +94,8 @@ async function onclick(ev: MouseEvent) {
|
|||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
background-color: var(--MI_THEME-fg);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
font-size: 12px;
|
||||
opacity: .5;
|
||||
padding: 5px 8px;
|
||||
|
|
@ -114,19 +114,19 @@ async function onclick(ev: MouseEvent) {
|
|||
|
||||
.visible {
|
||||
position: relative;
|
||||
//box-shadow: 0 0 0 1px var(--divider) inset;
|
||||
background: var(--bg);
|
||||
//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
|
||||
background: var(--MI_THEME-bg);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
html[data-color-scheme=dark] .visible {
|
||||
--c: rgb(255 255 255 / 2%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
|
||||
}
|
||||
|
||||
html[data-color-scheme=light] .visible {
|
||||
--c: rgb(0 0 0 / 2%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
|
|
@ -150,10 +150,10 @@ html[data-color-scheme=light] .visible {
|
|||
}
|
||||
|
||||
.indicator {
|
||||
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
|
||||
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
|
||||
background-color: black;
|
||||
border-radius: 6px;
|
||||
color: var(--accentLighten);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ defineProps<{
|
|||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
padding: var(--margin);
|
||||
border: 1px solid var(--divider);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
background-color: #000;
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ defineProps<{
|
|||
}
|
||||
|
||||
.videoOverlayPlayButton {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 99rem;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const canonical = props.host === localHost ? `@${props.username}` : `@${props.us
|
|||
|
||||
const url = `/${canonical}`;
|
||||
|
||||
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--mention'));
|
||||
const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-mention'));
|
||||
bg.setAlpha(0.1);
|
||||
const bgCss = bg.toRgbString();
|
||||
</script>
|
||||
|
|
@ -37,7 +37,7 @@ const bgCss = bg.toRgbString();
|
|||
display: inline-block;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border-radius: 999px;
|
||||
color: var(--mention);
|
||||
color: var(--MI_THEME-mention);
|
||||
}
|
||||
|
||||
.host {
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ const QUOTE_STYLE = `
|
|||
display: block;
|
||||
margin: 8px;
|
||||
padding: 6px 0 6px 12px;
|
||||
color: var(--fg);
|
||||
border-left: solid 3px var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
border-left: solid 3px var(--MI_THEME-fg);
|
||||
opacity: 0.7;
|
||||
`.split('\n').join(' ');
|
||||
|
||||
|
|
@ -251,7 +251,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
}
|
||||
case 'border': {
|
||||
let color = validColor(token.props.args.color);
|
||||
color = color ? `#${color}` : 'var(--accent)';
|
||||
color = color ? `#${color}` : 'var(--MI_THEME-accent)';
|
||||
let b_style = token.props.args.style;
|
||||
if (
|
||||
typeof b_style !== 'string' ||
|
||||
|
|
@ -284,7 +284,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
const child = token.children[0];
|
||||
const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
|
||||
return h('span', {
|
||||
style: 'display: inline-block; font-size: 90%; border: solid 1px var(--divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
|
||||
style: 'display: inline-block; font-size: 90%; border: solid 1px var(--MI_THEME-divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
|
||||
}, [
|
||||
h('i', {
|
||||
class: 'ti ti-clock',
|
||||
|
|
@ -355,7 +355,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
|
|||
return [h(EmA, {
|
||||
key: Math.random(),
|
||||
to: isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/user-tags/${encodeURIComponent(token.props.hashtag)}`,
|
||||
style: 'color:var(--hashtag);',
|
||||
style: 'color:var(--MI_THEME-hashtag);',
|
||||
}, `#${token.props.hashtag}`)];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ const isDeleted = ref(false);
|
|||
margin: auto;
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--focus);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -212,9 +212,9 @@ const isDeleted = ref(false);
|
|||
right: 12px;
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0 !important;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 32px var(--shadow);
|
||||
box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
|
||||
}
|
||||
|
||||
.footerButton {
|
||||
|
|
@ -259,7 +259,7 @@ const isDeleted = ref(false);
|
|||
padding: 16px 32px 8px 32px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
|
||||
& + .article {
|
||||
padding-top: 8px;
|
||||
|
|
@ -382,7 +382,7 @@ const isDeleted = ref(false);
|
|||
|
||||
.showLessLabel {
|
||||
display: inline-block;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -403,16 +403,16 @@ const isDeleted = ref(false);
|
|||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
|
||||
|
||||
&:hover > .collapsedLabel {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
}
|
||||
|
||||
.collapsedLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -424,12 +424,12 @@ const isDeleted = ref(false);
|
|||
}
|
||||
|
||||
.replyIcon {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
|
|
@ -449,7 +449,7 @@ const isDeleted = ref(false);
|
|||
|
||||
.quoteNote {
|
||||
padding: 16px;
|
||||
border: dashed 1px var(--renote);
|
||||
border: dashed 1px var(--MI_THEME-renote);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -473,7 +473,7 @@ const isDeleted = ref(false);
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
padding: 16px 32px 8px 32px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.renoteAvatar {
|
||||
|
|
@ -281,7 +281,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
padding: 4px 6px;
|
||||
font-size: 80%;
|
||||
line-height: 1;
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -323,14 +323,14 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
}
|
||||
|
||||
.noteReplyTarget {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.rn {
|
||||
margin-left: 4px;
|
||||
font-style: oblique;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.reactionOmitted {
|
||||
|
|
@ -350,7 +350,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
|
||||
.quoteNote {
|
||||
padding: 16px;
|
||||
border: dashed 1px var(--renote);
|
||||
border: dashed 1px var(--MI_THEME-renote);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -369,7 +369,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
|
||||
.showLessLabel {
|
||||
display: inline-block;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -390,16 +390,16 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), var(--MI_THEME-X15));
|
||||
|
||||
&:hover > .collapsedLabel {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
}
|
||||
|
||||
.collapsedLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -422,7 +422,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
|||
opacity: 0.7;
|
||||
|
||||
&.reacted {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ defineProps<{
|
|||
margin: 0 .5em 0 0;
|
||||
padding: 1px 6px;
|
||||
font-size: 80%;
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ if (props.detail) {
|
|||
}
|
||||
|
||||
.reply, .more {
|
||||
border-left: solid 0.5px var(--divider);
|
||||
border-left: solid 0.5px var(--MI_THEME-divider);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ if (props.detail) {
|
|||
.muted {
|
||||
text-align: center;
|
||||
padding: 8px !important;
|
||||
border: 1px solid var(--divider);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
margin: 8px 8px 0 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,10 +43,10 @@ defineExpose({
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.note {
|
||||
border-bottom: 0.5px solid var(--divider);
|
||||
border-bottom: 0.5px solid var(--MI_THEME-divider);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<li v-for="(choice, i) in poll.choices" :key="i" :class="$style.choice">
|
||||
<div :class="$style.bg" :style="{ 'width': `${choice.votes / total * 100}%` }"></div>
|
||||
<span :class="$style.fg">
|
||||
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--accent);"></i></template>
|
||||
<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--MI_THEME-accent);"></i></template>
|
||||
<EmMfm :text="choice.text" :plain="true"/>
|
||||
<span style="margin-left: 4px; opacity: 0.7;">({{ i18n.tsx._poll.votesCount({ n: choice.votes }) }})</span>
|
||||
</span>
|
||||
|
|
@ -52,8 +52,8 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
|
|||
position: relative;
|
||||
margin: 4px 0;
|
||||
padding: 4px;
|
||||
//border: solid 0.5px var(--divider);
|
||||
background: var(--accentedBg);
|
||||
//border: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
border-radius: 4px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -63,8 +63,8 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
|
||||
background: var(--MI_THEME-accent);
|
||||
background: linear-gradient(90deg,var(--MI_THEME-buttonGradateA),var(--MI_THEME-buttonGradateB));
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
|
|
@ -72,11 +72,11 @@ const total = computed(() => sum(props.poll.choices.map(x => x.votes)));
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ const props = defineProps<{
|
|||
justify-content: center;
|
||||
|
||||
&.canToggle {
|
||||
background: var(--buttonBg);
|
||||
background: var(--MI_THEME-buttonBg);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -72,12 +72,12 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
&.reacted, &.reacted:hover {
|
||||
background: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 0 0 1px var(--accent) inset;
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
box-shadow: 0 0 0 1px var(--MI_THEME-accent) inset;
|
||||
|
||||
> .count {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
> .icon {
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ const collapsed = ref(isLong);
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
|
||||
|
||||
> .fadeLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -78,7 +78,7 @@ const collapsed = ref(isLong);
|
|||
|
||||
&:hover {
|
||||
> .fadeLabel {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,13 +87,13 @@ const collapsed = ref(isLong);
|
|||
|
||||
.reply {
|
||||
margin-right: 6px;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.rp {
|
||||
margin-left: 4px;
|
||||
font-style: oblique;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.showLess {
|
||||
|
|
@ -105,7 +105,7 @@ const collapsed = ref(isLong);
|
|||
|
||||
.showLessLabel {
|
||||
display: inline-block;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
|
|||
|
|
@ -98,10 +98,10 @@ if (!invalid && props.origin === null && (props.mode === 'relative' || props.mod
|
|||
|
||||
<style lang="scss" module>
|
||||
.old1 {
|
||||
color: var(--warn);
|
||||
color: var(--MI_THEME-warn);
|
||||
}
|
||||
|
||||
.old1.old2 {
|
||||
color: var(--error);
|
||||
color: var(--MI_THEME-error);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ withDefaults(defineProps<{
|
|||
|
||||
<style module lang="scss">
|
||||
.timelineRoot {
|
||||
background-color: var(--panel);
|
||||
background-color: var(--MI_THEME-panel);
|
||||
height: 100%;
|
||||
max-height: var(--embedMaxHeight, none);
|
||||
display: flex;
|
||||
|
|
@ -29,7 +29,7 @@ withDefaults(defineProps<{
|
|||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--divider);
|
||||
border-bottom: 1px solid var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.body {
|
||||
|
|
|
|||
|
|
@ -110,8 +110,8 @@ function top(ev: MouseEvent) {
|
|||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,6 +47,6 @@ if (note.value?.url != null || note.value?.uri != null) {
|
|||
|
||||
<style lang="scss" module>
|
||||
.noteEmbedRoot {
|
||||
background-color: var(--panel);
|
||||
background-color: var(--MI_THEME-panel);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -93,8 +93,8 @@ function top(ev: MouseEvent) {
|
|||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
html {
|
||||
background-color: transparent;
|
||||
color-scheme: light dark;
|
||||
color: var(--fg);
|
||||
accent-color: var(--accent);
|
||||
color: var(--MI_THEME-fg);
|
||||
accent-color: var(--MI_THEME-accent);
|
||||
overflow: clip;
|
||||
overflow-wrap: break-word;
|
||||
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
|
||||
|
|
@ -29,7 +29,7 @@ html {
|
|||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
&, * {
|
||||
scrollbar-color: var(--scrollbarHandle) transparent;
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
|
@ -42,14 +42,14 @@ html {
|
|||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--scrollbarHandle);
|
||||
background: var(--MI_THEME-scrollbarHandle);
|
||||
|
||||
&:hover {
|
||||
background: var(--scrollbarHandleHover);
|
||||
background: var(--MI_THEME-scrollbarHandleHover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ rt {
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: var(--focus) solid 2px;
|
||||
outline: var(--MI_THEME-focus) solid 2px;
|
||||
outline-offset: -2px;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -151,38 +151,38 @@ rt {
|
|||
|
||||
._buttonGray {
|
||||
@extend ._button;
|
||||
background: var(--buttonBg);
|
||||
background: var(--MI_THEME-buttonBg);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
background: var(--MI_THEME-buttonHoverBg);
|
||||
}
|
||||
}
|
||||
|
||||
._buttonPrimary {
|
||||
@extend ._button;
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: hsl(from var(--accent) h s calc(l + 5));
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: hsl(from var(--accent) h s calc(l - 5));
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
|
||||
}
|
||||
}
|
||||
|
||||
._buttonGradate {
|
||||
@extend ._buttonPrimary;
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -199,13 +199,13 @@ rt {
|
|||
}
|
||||
|
||||
._help {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
._textButton {
|
||||
@extend ._button;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: 2px;
|
||||
|
|
@ -217,7 +217,7 @@ rt {
|
|||
}
|
||||
|
||||
._panel {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -263,22 +263,22 @@ rt {
|
|||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
|
||||
&:active {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
._popup {
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
border-radius: var(--radius);
|
||||
contain: content;
|
||||
}
|
||||
|
||||
._acrylic {
|
||||
background: var(--acrylicPanel);
|
||||
background: var(--MI_THEME-acrylicPanel);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
}
|
||||
|
|
@ -296,7 +296,7 @@ rt {
|
|||
}
|
||||
|
||||
._link {
|
||||
color: var(--link);
|
||||
color: var(--MI_THEME-link);
|
||||
}
|
||||
|
||||
._caption {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export function applyTheme(theme: Theme, persist = true) {
|
|||
}
|
||||
|
||||
for (const [k, v] of Object.entries(props)) {
|
||||
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||||
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
||||
}
|
||||
|
||||
// iframeを正常に透過させるために、cssのcolor-schemeは `light dark;` 固定にしてある。style.scss参照
|
||||
|
|
|
|||
|
|
@ -88,8 +88,8 @@ onUnmounted(() => {
|
|||
<style lang="scss" module>
|
||||
.rootForEmbedPage {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--divider);
|
||||
background-color: var(--bg);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
|
|
@ -67,7 +67,6 @@
|
|||
switchOnFg: '@accent',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
badge: '#31b1ce',
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
windowHeader: ':alpha<0.85<@panel',
|
||||
popup: ':lighten<3<@panel',
|
||||
|
|
@ -67,7 +67,6 @@
|
|||
switchOnFg: '@fgOnAccent',
|
||||
inputBorder: 'rgba(0, 0, 0, 0.1)',
|
||||
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
|
||||
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
|
||||
badge: '#31b1ce',
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@accent',
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
htmlThemeColor: '@bg',
|
||||
fgOnWhite: '@accent',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
codeBoolean: '#c59eff',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@indicator',
|
||||
|
|
@ -69,7 +69,6 @@
|
|||
buttonGradateB: ':hue<20<@accent',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
codeBoolean: '#c59eff',
|
||||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(255, 255, 255, 0.1)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@indicator',
|
||||
|
|
@ -71,7 +71,6 @@
|
|||
buttonGradateB: ':hue<20<@accent',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
|
||||
scrollbarHandle: '#74747433',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
dateLabelFg: '@fg',
|
||||
inputBorder: 'rgba(0, 0, 0, 0.1)',
|
||||
inputBorderHover: 'rgba(0, 0, 0, 0.2)',
|
||||
panelBorder: '" solid 1px var(--divider)',
|
||||
panelBorder: '" solid 1px var(--MI_THEME-divider)',
|
||||
accentDarken: ':darken<10<@accent',
|
||||
acrylicPanel: ':alpha<0.5<@panel',
|
||||
navIndicator: '@accent',
|
||||
|
|
@ -52,7 +52,6 @@
|
|||
panelHeaderFg: '@fg',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':darken<3<@panel',
|
||||
listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
|
||||
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
|
||||
wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ async function main() {
|
|||
const theme = localStorage.getItem('theme');
|
||||
if (theme) {
|
||||
for (const [k, v] of Object.entries(JSON.parse(theme))) {
|
||||
document.documentElement.style.setProperty(`--${k}`, v.toString());
|
||||
document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString());
|
||||
|
||||
// HTMLの theme-color 適用
|
||||
if (k === 'htmlThemeColor') {
|
||||
|
|
|
|||
|
|
@ -182,12 +182,6 @@ export async function common(createVue: () => App<Element>) {
|
|||
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
|
||||
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
|
||||
defaultStore.set('themeInitial', false);
|
||||
} else {
|
||||
if (defaultStore.state.darkMode) {
|
||||
applyTheme(darkTheme.value);
|
||||
} else {
|
||||
applyTheme(lightTheme.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<MkFolder>
|
||||
<template #icon>
|
||||
<i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--success)"></i>
|
||||
<i v-else-if="report.resolved && report.resolvedAs === 'reject'" class="ti ti-x" style="color: var(--error)"></i>
|
||||
<i v-if="report.resolved && report.resolvedAs === 'accept'" class="ti ti-check" style="color: var(--MI_THEME-success)"></i>
|
||||
<i v-else-if="report.resolved && report.resolvedAs === 'reject'" class="ti ti-x" style="color: var(--MI_THEME-error)"></i>
|
||||
<i v-else-if="report.resolved" class="ti ti-slash"></i>
|
||||
<i v-else class="ti ti-exclamation-circle" style="color: var(--warn)"></i>
|
||||
<i v-else class="ti ti-exclamation-circle" style="color: var(--MI_THEME-warn)"></i>
|
||||
</template>
|
||||
<template #label><MkAcct :user="report.targetUser"/> (by <MkAcct :user="report.reporter"/>)</template>
|
||||
<template #caption>{{ report.comment }}</template>
|
||||
|
|
@ -17,8 +17,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #footer>
|
||||
<div class="_buttons">
|
||||
<template v-if="!report.resolved">
|
||||
<MkButton @click="resolve('accept')"><i class="ti ti-check" style="color: var(--success)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.accept }})</MkButton>
|
||||
<MkButton @click="resolve('reject')"><i class="ti ti-x" style="color: var(--error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</MkButton>
|
||||
<MkButton @click="resolve('accept')"><i class="ti ti-check" style="color: var(--MI_THEME-success)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.accept }})</MkButton>
|
||||
<MkButton @click="resolve('reject')"><i class="ti ti-x" style="color: var(--MI_THEME-error)"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts._abuseUserReport.reject }})</MkButton>
|
||||
<MkButton @click="resolve(null)"><i class="ti ti-slash"></i> {{ i18n.ts._abuseUserReport.resolve }} ({{ i18n.ts.other }})</MkButton>
|
||||
</template>
|
||||
<template v-if="report.targetUser.host != null">
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
|
|||
.root {
|
||||
padding: 16px;
|
||||
font-size: 90%;
|
||||
background: var(--infoWarnBg);
|
||||
color: var(--error);
|
||||
background: var(--MI_THEME-infoWarnBg);
|
||||
color: var(--MI_THEME-error);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -193,12 +193,12 @@ tick();
|
|||
|
||||
function calcColors() {
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
|
||||
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
|
||||
const dark = tinycolor(computedStyle.getPropertyValue('--MI_THEME-bg')).isDark();
|
||||
const accent = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
||||
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
|
||||
//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||
sHandColor.value = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
|
||||
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
|
||||
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--MI_THEME-fg')).toHexString();
|
||||
hHandColor.value = accent;
|
||||
nowColor.value = accent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.header">
|
||||
<span :class="$style.icon">
|
||||
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
|
||||
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
|
||||
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
|
||||
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
|
||||
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i>
|
||||
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
|
||||
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
|
||||
</span>
|
||||
<span :class="$style.title">{{ announcement.title }}</span>
|
||||
</div>
|
||||
|
|
@ -83,7 +83,7 @@ onMounted(() => {
|
|||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
box-sizing: border-box;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -170,6 +170,6 @@ function addUser() {
|
|||
.actions {
|
||||
margin-top: 16px;
|
||||
padding: 24px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ const containerStyle = computed(() => {
|
|||
|
||||
const border = isBordered ? {
|
||||
borderWidth: c.borderWidth ?? '1px',
|
||||
borderColor: c.borderColor ?? 'var(--divider)',
|
||||
borderColor: c.borderColor ?? 'var(--MI_THEME-divider)',
|
||||
borderStyle: c.borderStyle ?? 'solid',
|
||||
} : undefined;
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ function openPostForm() {
|
|||
}
|
||||
|
||||
.postForm {
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -407,16 +407,16 @@ onBeforeUnmount(() => {
|
|||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background: var(--X3);
|
||||
background: var(--MI_THEME-X3);
|
||||
}
|
||||
|
||||
&[data-selected='true'] {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
background: var(--MI_THEME-accentDarken);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@ function onMousedown(evt: MouseEvent): void {
|
|||
font-size: 95%;
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background: var(--buttonBg);
|
||||
background: var(--MI_THEME-buttonBg);
|
||||
border-radius: 5px;
|
||||
overflow: clip;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -140,11 +140,11 @@ function onMousedown(evt: MouseEvent): void {
|
|||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--buttonHoverBg);
|
||||
background: var(--MI_THEME-buttonHoverBg);
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: var(--buttonHoverBg);
|
||||
background: var(--MI_THEME-buttonHoverBg);
|
||||
}
|
||||
|
||||
&.small {
|
||||
|
|
@ -167,15 +167,15 @@ function onMousedown(evt: MouseEvent): void {
|
|||
|
||||
&.primary {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: var(--accent);
|
||||
color: var(--MI_THEME-fgOnAccent) !important;
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: hsl(from var(--accent) h s calc(l + 5));
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: hsl(from var(--accent) h s calc(l + 5));
|
||||
background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,15 +216,15 @@ function onMousedown(evt: MouseEvent): void {
|
|||
|
||||
&.gradate {
|
||||
font-weight: bold;
|
||||
color: var(--fgOnAccent) !important;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent) !important;
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:not(:disabled):active {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,9 +68,9 @@ async function onClick() {
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
background: transparent;
|
||||
border: solid 1px var(--accent);
|
||||
border: solid 1px var(--MI_THEME-accent);
|
||||
padding: 0;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
|
|
@ -99,17 +99,17 @@ async function onClick() {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
border-color: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
border-color: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
border-color: var(--accentDarken);
|
||||
background: var(--MI_THEME-accentDarken);
|
||||
border-color: var(--MI_THEME-accentDarken);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const bannerStyle = computed(() => {
|
|||
height: 100%;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 0 0 2px var(--focus);
|
||||
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +117,7 @@ const bannerStyle = computed(() => {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
|
||||
}
|
||||
|
||||
> .name {
|
||||
|
|
@ -148,7 +148,7 @@ const bannerStyle = computed(() => {
|
|||
bottom: 16px;
|
||||
left: 16px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: var(--warn);
|
||||
color: var(--MI_THEME-warn);
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
|
|
@ -167,7 +167,7 @@ const bannerStyle = computed(() => {
|
|||
|
||||
> footer {
|
||||
padding: 12px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
|
||||
> span {
|
||||
opacity: 0.7;
|
||||
|
|
@ -213,8 +213,8 @@ const bannerStyle = computed(() => {
|
|||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(25%, -25%);
|
||||
background-color: var(--accent);
|
||||
border: solid var(--bg) 4px;
|
||||
background-color: var(--MI_THEME-accent);
|
||||
border: solid var(--MI_THEME-bg) 4px;
|
||||
border-radius: 100%;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -53,11 +53,11 @@ defineExpose({
|
|||
> .item {
|
||||
font-size: 85%;
|
||||
padding: 4px 12px 4px 8px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: 999px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover);
|
||||
border-color: var(--MI_THEME-inputBorderHover);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
|
|||
|
|
@ -49,13 +49,13 @@ const remaining = computed(() => {
|
|||
outline: none;
|
||||
|
||||
.root {
|
||||
box-shadow: inset 0 0 0 2px var(--focus);
|
||||
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ const remaining = computed(() => {
|
|||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
background: var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.description {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ watch(() => props.lang, (to) => {
|
|||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--divider);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
|
||||
color: var(--shiki-fallback);
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ function copy() {
|
|||
.codeBlockFallbackRoot {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
|
|
@ -94,8 +94,8 @@ function copy() {
|
|||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-top: 4px;
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
color: var(--MI_THEME-fg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
.codePlaceholderContainer {
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ watch(v, newValue => {
|
|||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
@ -160,17 +160,17 @@ watch(v, newValue => {
|
|||
margin: 0;
|
||||
border-radius: 6px;
|
||||
padding: 0;
|
||||
color: var(--fg);
|
||||
border: solid 1px var(--panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
border: solid 1px var(--MI_THEME-panel);
|
||||
transition: border-color 0.1s ease-out;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
border-color: var(--MI_THEME-inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focused.codeEditorRoot {
|
||||
border-color: var(--accent) !important;
|
||||
border-color: var(--MI_THEME-accent) !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +196,7 @@ watch(v, newValue => {
|
|||
resize: none;
|
||||
text-align: left;
|
||||
color: transparent;
|
||||
caret-color: var(--fg);
|
||||
caret-color: var(--MI_THEME-fg);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
|
|
@ -211,6 +211,6 @@ watch(v, newValue => {
|
|||
}
|
||||
|
||||
.textarea::selection {
|
||||
color: var(--bg);
|
||||
color: var(--MI_THEME-bg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const props = defineProps<{
|
|||
display: inline-block;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
overflow-wrap: anywhere;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const onInput = () => {
|
|||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
@ -72,8 +72,8 @@ const onInput = () => {
|
|||
|
||||
&.focused {
|
||||
> .inputCore {
|
||||
border-color: var(--accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--focus);
|
||||
border-color: var(--MI_THEME-accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,9 +98,9 @@ const onInput = () => {
|
|||
font: inherit;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
background: var(--MI_THEME-panel);
|
||||
border: solid 1px var(--MI_THEME-panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -108,7 +108,7 @@ const onInput = () => {
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
border-color: var(--MI_THEME-inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -167,9 +167,9 @@ onUnmounted(() => {
|
|||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
left: 0;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
border-bottom: solid 0.5px var(--panelHeaderDivider);
|
||||
color: var(--MI_THEME-panelHeaderFg);
|
||||
background: var(--MI_THEME-panelHeaderBg);
|
||||
border-bottom: solid 0.5px var(--MI_THEME-panelHeaderDivider);
|
||||
z-index: 2;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
|
@ -216,11 +216,11 @@ onUnmounted(() => {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
|
||||
|
||||
> .fadeLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -229,7 +229,7 @@ onUnmounted(() => {
|
|||
|
||||
&:hover {
|
||||
> .fadeLabel {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ onMounted(() => {
|
|||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
|
||||
const selection = cropper.getCropperSelection()!;
|
||||
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
|
||||
selection.themeColor = tinycolor(computedStyle.getPropertyValue('--MI_THEME-accent')).toHexString();
|
||||
selection.aspectRatio = props.aspectRatio;
|
||||
selection.initialAspectRatio = props.aspectRatio;
|
||||
selection.outlined = true;
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ function cancel() {
|
|||
.emojiImgWrapper {
|
||||
max-width: 100%;
|
||||
height: 40cqh;
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--X5) 8px, var(--X5) 14px);
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
|
||||
border-radius: var(--radius);
|
||||
margin: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -101,8 +101,8 @@ function cancel() {
|
|||
display: inline-block;
|
||||
word-break: break-all;
|
||||
padding: 3px 10px;
|
||||
background-color: var(--X5);
|
||||
border: solid 1px var(--divider);
|
||||
background-color: var(--MI_THEME-X5);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ export default defineComponent({
|
|||
box-shadow: none;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +235,7 @@ export default defineComponent({
|
|||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--dateLabelFg);
|
||||
color: var(--MI_THEME-dateLabelFg);
|
||||
}
|
||||
|
||||
.date-1 {
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ function onInputKeydown(evt: KeyboardEvent) {
|
|||
max-width: 480px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -206,15 +206,15 @@ function onInputKeydown(evt: KeyboardEvent) {
|
|||
}
|
||||
|
||||
.type_success {
|
||||
color: var(--success);
|
||||
color: var(--MI_THEME-success);
|
||||
}
|
||||
|
||||
.type_error {
|
||||
color: var(--error);
|
||||
color: var(--MI_THEME-error);
|
||||
}
|
||||
|
||||
.type_warning {
|
||||
color: var(--warn);
|
||||
color: var(--MI_THEME-warn);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,6 @@ defineProps<{
|
|||
|
||||
<style scoped lang="scss">
|
||||
.default {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ function neverShow() {
|
|||
text-align: center;
|
||||
padding-top: 25px;
|
||||
width: 100px;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -148,14 +148,14 @@ function onDragend() {
|
|||
}
|
||||
|
||||
&.isSelected {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
background: var(--MI_THEME-accentDarken);
|
||||
}
|
||||
|
||||
> .label {
|
||||
|
|
@ -244,7 +244,7 @@ function onDragend() {
|
|||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
position: relative;
|
||||
padding: 8px;
|
||||
height: 64px;
|
||||
background: var(--driveFolderBg);
|
||||
background: var(--MI_THEME-driveFolderBg);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -326,7 +326,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
right: -4px;
|
||||
bottom: -4px;
|
||||
left: -4px;
|
||||
border: 2px dashed var(--focus);
|
||||
border: 2px dashed var(--MI_THEME-focus);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -345,13 +345,13 @@ function onContextmenu(ev: MouseEvent) {
|
|||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border: solid 2px var(--divider);
|
||||
border: solid 2px var(--MI_THEME-divider);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.checked {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
border-color: var(--MI_THEME-accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&::after {
|
||||
content: "\ea5e";
|
||||
|
|
@ -368,7 +368,7 @@ function onContextmenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -721,7 +721,7 @@ onBeforeUnmount(() => {
|
|||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
font-size: 0.9em;
|
||||
box-shadow: 0 1px 0 var(--divider);
|
||||
box-shadow: 0 1px 0 var(--MI_THEME-divider);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -815,7 +815,7 @@ onBeforeUnmount(() => {
|
|||
top: 38px;
|
||||
width: 100%;
|
||||
height: calc(100% - 38px);
|
||||
border: dashed 2px var(--focus);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const isThumbnailAvailable = computed(() => {
|
|||
.root {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ const isThumbnailAvailable = computed(() => {
|
|||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 4px var(--warn);
|
||||
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
|
||||
}
|
||||
|
||||
.iconSub {
|
||||
|
|
|
|||
|
|
@ -306,9 +306,9 @@ onUnmounted(() => {
|
|||
|
||||
.embedCodeGenPreviewRoot {
|
||||
position: relative;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
background-size: auto auto;
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--panel) 6px, var(--panel) 12px);
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--MI_THEME-panel) 6px, var(--MI_THEME-panel) 12px);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
|
@ -381,8 +381,8 @@ onUnmounted(() => {
|
|||
|
||||
.embedCodeGenResultHeadingIcon {
|
||||
margin: 0 auto;
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
text-align: center;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
|
||||
<!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
|
||||
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
|
||||
<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--MI_THEME-divider);">
|
||||
<header class="_acrylic" @click="shown = !shown">
|
||||
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-icons"></i>:{{ emojis.length }})
|
||||
</header>
|
||||
|
|
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
</section>
|
||||
<!-- フォルダの中にはカスタム絵文字やフォルダがある -->
|
||||
<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
|
||||
<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--MI_THEME-divider);">
|
||||
<header class="_acrylic" @click="shown = !shown">
|
||||
<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> (<i class="ti ti-folder ti-fw"></i>:{{ customEmojiTree?.length }} <i class="ti ti-icons ti-fw"></i>:{{ emojis.length }})
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -580,7 +580,7 @@ defineExpose({
|
|||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
|
||||
opacity: 1;
|
||||
|
||||
> .emoji {
|
||||
|
|
@ -615,7 +615,7 @@ defineExpose({
|
|||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
|
||||
opacity: 1;
|
||||
|
||||
> .emoji {
|
||||
|
|
@ -638,7 +638,7 @@ defineExpose({
|
|||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:not(:focus):not(.filled) {
|
||||
margin-bottom: env(safe-area-inset-bottom, 0px);
|
||||
|
|
@ -647,7 +647,7 @@ defineExpose({
|
|||
&:not(.filled) {
|
||||
order: 1;
|
||||
z-index: 2;
|
||||
box-shadow: 0px -1px 0 0px var(--divider);
|
||||
box-shadow: 0px -1px 0 0px var(--MI_THEME-divider);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -658,11 +658,11 @@ defineExpose({
|
|||
> .tab {
|
||||
flex: 1;
|
||||
height: 38px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
|
||||
&.active {
|
||||
border-top: solid 1px var(--accent);
|
||||
color: var(--accent);
|
||||
border-top: solid 1px var(--MI_THEME-accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -681,7 +681,7 @@ defineExpose({
|
|||
> .group {
|
||||
&:not(.index) {
|
||||
padding: 4px 0 8px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> header {
|
||||
|
|
@ -708,7 +708,7 @@ defineExpose({
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -730,13 +730,13 @@ defineExpose({
|
|||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--X6) 48% 52%, transparent 52% 100%);
|
||||
background: linear-gradient(-45deg, transparent 0% 48%, var(--MI_THEME-X6) 48% 52%, transparent 52% 100%);
|
||||
opacity: 1;
|
||||
|
||||
> .emoji {
|
||||
|
|
@ -757,7 +757,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
&.result {
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ const emits = defineEmits<{
|
|||
<style lang="scss" module>
|
||||
.extInstallerRoot {
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -125,8 +125,8 @@ const emits = defineEmits<{
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--accent);
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.extInstallerTitle {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const props = defineProps<{
|
|||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
> .thumbnail {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const props = defineProps<{
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -92,7 +92,7 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
&:global(.gray) {
|
||||
--c: var(--bg);
|
||||
--c: var(--MI_THEME-bg);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ function afterLeave(element: Element) {
|
|||
|
||||
onMounted(() => {
|
||||
function getParentBg(el?: HTMLElement | null): string {
|
||||
if (el == null || el.tagName === 'BODY') return 'var(--bg)';
|
||||
if (el == null || el.tagName === 'BODY') return 'var(--MI_THEME-bg)';
|
||||
const background = el.style.background || el.style.backgroundColor;
|
||||
if (background) {
|
||||
return background;
|
||||
|
|
@ -134,7 +134,7 @@ onMounted(() => {
|
|||
flex: 1;
|
||||
margin: auto;
|
||||
height: 1px;
|
||||
background: var(--divider);
|
||||
background: var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ function toggle() {
|
|||
onMounted(() => {
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const parentBg = getBgColor(rootEl.value!.parentElement!);
|
||||
const myBg = computedStyle.getPropertyValue('--panel');
|
||||
const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
|
||||
bgSame.value = parentBg === myBg;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -144,7 +144,7 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 12px 9px 12px;
|
||||
background: var(--folderHeaderBg);
|
||||
background: var(--MI_THEME-folderHeaderBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
border-radius: 6px;
|
||||
|
|
@ -152,7 +152,7 @@ onMounted(() => {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: var(--folderHeaderHoverBg);
|
||||
background: var(--MI_THEME-folderHeaderHoverBg);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
|
|
@ -160,8 +160,8 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: var(--accent);
|
||||
background: var(--folderHeaderHoverBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
background: var(--MI_THEME-folderHeaderHoverBg);
|
||||
}
|
||||
|
||||
&.opened {
|
||||
|
|
@ -175,7 +175,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.headerLower {
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
font-size: .85em;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
|
@ -209,13 +209,13 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.headerTextSub {
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -224,12 +224,12 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.body {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: 0 0 6px 6px;
|
||||
container-type: inline-size;
|
||||
|
||||
&.bgSame {
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -239,11 +239,11 @@ onMounted(() => {
|
|||
bottom: var(--stickyBottom, 0px);
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
background: var(--acrylicBg);
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
background-size: auto auto;
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--panel) 5px, var(--panel) 10px);
|
||||
background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--MI_THEME-panel) 5px, var(--MI_THEME-panel) 10px);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -165,8 +165,8 @@ onBeforeUnmount(() => {
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
color: var(--fgOnWhite);
|
||||
border: solid 1px var(--accent);
|
||||
color: var(--MI_THEME-fgOnWhite);
|
||||
border: solid 1px var(--MI_THEME-accent);
|
||||
padding: 0;
|
||||
height: 31px;
|
||||
font-size: 16px;
|
||||
|
|
@ -201,17 +201,17 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
border-color: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
border-color: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
border-color: var(--accentDarken);
|
||||
background: var(--MI_THEME-accentDarken);
|
||||
border-color: var(--MI_THEME-accentDarken);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,6 @@ function selectButton(ev: MouseEvent) {
|
|||
<style module>
|
||||
.fileNotSelected {
|
||||
font-weight: 700;
|
||||
color: var(--infoWarnFg);
|
||||
color: var(--MI_THEME-infoWarnFg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const props = defineProps<{
|
|||
}
|
||||
|
||||
.text {
|
||||
color: var(--warn);
|
||||
color: var(--MI_THEME-warn);
|
||||
font-size: 90%;
|
||||
animation: modified-blink 2s infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ withDefaults(defineProps<{
|
|||
<style module lang="scss">
|
||||
.root {
|
||||
--fukidashi-radius: var(--radius);
|
||||
--fukidashi-bg: var(--panel);
|
||||
--fukidashi-bg: var(--MI_THEME-panel);
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
@ -48,7 +48,7 @@ withDefaults(defineProps<{
|
|||
padding-top: calc(var(--fukidashi-radius) * .13);
|
||||
|
||||
&.shadow {
|
||||
filter: drop-shadow(0 4px 32px var(--shadow));
|
||||
filter: drop-shadow(0 4px 32px var(--MI_THEME-shadow));
|
||||
}
|
||||
|
||||
&.left {
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ function leaveHover(): void {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
> .thumbnail {
|
||||
transform: scale(1.1);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const search = () => {
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: 4px 0 0 4px;
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@ const search = () => {
|
|||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -36,14 +36,14 @@ function close() {
|
|||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
font-size: 90%;
|
||||
background: var(--infoBg);
|
||||
color: var(--infoFg);
|
||||
background: var(--MI_THEME-infoBg);
|
||||
color: var(--MI_THEME-infoFg);
|
||||
border-radius: var(--radius);
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.warn {
|
||||
background: var(--infoWarnBg);
|
||||
color: var(--infoWarnFg);
|
||||
background: var(--MI_THEME-infoWarnBg);
|
||||
color: var(--MI_THEME-infoWarnFg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ defineExpose({
|
|||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--fgTransparentWeak);
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
@ -216,8 +216,8 @@ defineExpose({
|
|||
|
||||
&.focused {
|
||||
> .inputCore {
|
||||
border-color: var(--accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--focus);
|
||||
border-color: var(--MI_THEME-accent) !important;
|
||||
//box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,9 +242,9 @@ defineExpose({
|
|||
font: inherit;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
color: var(--fg);
|
||||
background: var(--panel);
|
||||
border: solid 1px var(--panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
background: var(--MI_THEME-panel);
|
||||
border: solid 1px var(--MI_THEME-panel);
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
|
|
@ -252,7 +252,7 @@ defineExpose({
|
|||
transition: border-color 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--inputBorderHover) !important;
|
||||
border-color: var(--MI_THEME-inputBorderHover) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function getInstanceIcon(instance): string {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: 8px;
|
||||
|
||||
> :global(.icon) {
|
||||
|
|
@ -62,7 +62,7 @@ function getInstanceIcon(instance): string {
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
padding-right: 8px;
|
||||
|
||||
> :global(.host) {
|
||||
|
|
@ -109,7 +109,7 @@ function getInstanceIcon(instance): string {
|
|||
}
|
||||
|
||||
&:global(.gray) {
|
||||
--c: var(--bg);
|
||||
--c: var(--MI_THEME-bg);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,7 +121,7 @@ function createDoughnut(chartEl, tooltip, data) {
|
|||
labels: data.map(x => x.name),
|
||||
datasets: [{
|
||||
backgroundColor: data.map(x => x.color),
|
||||
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
|
||||
borderColor: getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-panel'),
|
||||
borderWidth: 2,
|
||||
hoverOffset: 0,
|
||||
data: data.map(x => x.value),
|
||||
|
|
@ -256,7 +256,7 @@ onMounted(() => {
|
|||
flex: 1;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
max-height: 300px;
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #label>{{ invite.code }}</template>
|
||||
<template #suffix>
|
||||
<span v-if="invite.used">{{ i18n.ts.used }}</span>
|
||||
<span v-else-if="isExpired" style="color: var(--error)">{{ i18n.ts.expired }}</span>
|
||||
<span v-else style="color: var(--success)">{{ i18n.ts.unused }}</span>
|
||||
<span v-else-if="isExpired" style="color: var(--MI_THEME-error)">{{ i18n.ts.expired }}</span>
|
||||
<span v-else style="color: var(--MI_THEME-success)">{{ i18n.ts.unused }}</span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="_buttons">
|
||||
|
|
|
|||
|
|
@ -105,8 +105,8 @@ function close() {
|
|||
box-sizing: border-box;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
background: var(--accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ function close() {
|
|||
position: absolute;
|
||||
top: 32px;
|
||||
left: 32px;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@ onDeactivated(() => {
|
|||
.audioContainer {
|
||||
container-type: inline-size;
|
||||
position: relative;
|
||||
border: .5px solid var(--divider);
|
||||
border: .5px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
|
||||
|
|
@ -412,7 +412,7 @@ onDeactivated(() => {
|
|||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 4px var(--warn);
|
||||
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -458,8 +458,8 @@ onDeactivated(() => {
|
|||
font-size: 1.05rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
background-color: var(--accentedBg);
|
||||
color: var(--MI_THEME-accent);
|
||||
background-color: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div :class="$style.indicators">
|
||||
<div v-if="['image/gif', 'image/apng'].includes(image.type)" :class="$style.indicator">GIF</div>
|
||||
<div v-if="image.comment" :class="$style.indicator">ALT</div>
|
||||
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
</div>
|
||||
<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
|
||||
<i class="ti ti-eye-off" :class="$style.hide" @click.stop="hide = true"></i>
|
||||
|
|
@ -165,7 +165,7 @@ function showMenu(ev: MouseEvent) {
|
|||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 4px var(--warn);
|
||||
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -186,8 +186,8 @@ function showMenu(ev: MouseEvent) {
|
|||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
background-color: var(--MI_THEME-fg);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
font-size: 12px;
|
||||
opacity: .5;
|
||||
padding: 5px 8px;
|
||||
|
|
@ -206,19 +206,19 @@ function showMenu(ev: MouseEvent) {
|
|||
|
||||
.visible {
|
||||
position: relative;
|
||||
//box-shadow: 0 0 0 1px var(--divider) inset;
|
||||
background: var(--bg);
|
||||
//box-shadow: 0 0 0 1px var(--MI_THEME-divider) inset;
|
||||
background: var(--MI_THEME-bg);
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
html[data-color-scheme=dark] .visible {
|
||||
--c: rgb(255 255 255 / 2%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
|
||||
}
|
||||
|
||||
html[data-color-scheme=light] .visible {
|
||||
--c: rgb(0 0 0 / 2%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--bg) 16.67%, var(--bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--bg) 66.67%, var(--bg) 100%);
|
||||
background-image: linear-gradient(45deg, var(--c) 16.67%, var(--MI_THEME-bg) 16.67%, var(--MI_THEME-bg) 50%, var(--c) 50%, var(--c) 66.67%, var(--MI_THEME-bg) 66.67%, var(--MI_THEME-bg) 100%);
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
@ -258,10 +258,10 @@ html[data-color-scheme=light] .visible {
|
|||
}
|
||||
|
||||
.indicator {
|
||||
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
|
||||
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
|
||||
background-color: black;
|
||||
border-radius: 6px;
|
||||
color: var(--accentLighten);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
|
|
|
|||
|
|
@ -310,13 +310,13 @@ defineExpose({
|
|||
|
||||
:global(.pswp) {
|
||||
--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
|
||||
--pswp-bg: var(--modalBg) !important;
|
||||
--pswp-bg: var(--MI_THEME-modalBg) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.pswp__bg {
|
||||
background: var(--modalBg);
|
||||
background: var(--MI_THEME-modalBg);
|
||||
backdrop-filter: var(--modalBgFilter);
|
||||
}
|
||||
|
||||
|
|
@ -335,14 +335,14 @@ defineExpose({
|
|||
}
|
||||
|
||||
.pswp__alt-text {
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: var(--margin);
|
||||
border-radius: var(--radius);
|
||||
max-height: 8em;
|
||||
overflow-y: auto;
|
||||
text-shadow: var(--bg) 0 0 10px, var(--bg) 0 0 3px, var(--bg) 0 0 3px;
|
||||
text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<!-- Media系専用のinput range -->
|
||||
<template>
|
||||
<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--scrollbarHandle);'">
|
||||
<div :style="sliderBgWhite ? '--sliderBg: rgba(255,255,255,.25);' : '--sliderBg: var(--MI_THEME-scrollbarHandle);'">
|
||||
<div :class="$style.controlsSeekbar">
|
||||
<progress v-if="buffer !== undefined" :class="$style.buffer" :value="isNaN(buffer) ? 0 : buffer" min="0" max="1">{{ Math.round(buffer * 100) }}% buffered</progress>
|
||||
<input v-model="model" :class="$style.seek" :style="`--value: ${modelValue * 100}%;`" type="range" min="0" max="1" step="any" @change="emit('dragEnded', modelValue)"/>
|
||||
|
|
@ -48,7 +48,7 @@ const modelValue = computed({
|
|||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 26px;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
display: block;
|
||||
height: 19px;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
|
||||
<div :class="$style.indicators">
|
||||
<div v-if="video.comment" :class="$style.indicator">ALT</div>
|
||||
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti ti-eye-off" :class="$style.hide" @click="hide = true"></i>
|
||||
<div :class="$style.indicators">
|
||||
<div v-if="video.comment" :class="$style.indicator">ALT</div>
|
||||
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
<div v-if="video.isSensitive" :class="$style.indicator" style="color: var(--MI_THEME-warn);" :title="i18n.ts.sensitive"><i class="ti ti-eye-exclamation"></i></div>
|
||||
</div>
|
||||
<div :class="$style.videoControls" @click.self="togglePlayPause">
|
||||
<div :class="[$style.controlsChild, $style.controlsLeft]">
|
||||
|
|
@ -508,7 +508,7 @@ onDeactivated(() => {
|
|||
height: 100%;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 4px var(--warn);
|
||||
box-shadow: inset 0 0 0 4px var(--MI_THEME-warn);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -523,10 +523,10 @@ onDeactivated(() => {
|
|||
}
|
||||
|
||||
.indicator {
|
||||
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
|
||||
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
|
||||
background-color: black;
|
||||
border-radius: 6px;
|
||||
color: var(--accentLighten);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -537,8 +537,8 @@ onDeactivated(() => {
|
|||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
background-color: var(--MI_THEME-fg);
|
||||
color: var(--MI_THEME-accentLighten);
|
||||
font-size: 12px;
|
||||
opacity: .5;
|
||||
padding: 5px 8px;
|
||||
|
|
@ -592,7 +592,7 @@ onDeactivated(() => {
|
|||
opacity: 0;
|
||||
transition: opacity .4s ease-in-out;
|
||||
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
border-radius: 99rem;
|
||||
|
|
@ -663,7 +663,7 @@ onDeactivated(() => {
|
|||
font-size: 1.05rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent);
|
||||
background-color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
|
|
|||
|
|
@ -47,12 +47,12 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
|
|||
display: inline-block;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border-radius: 999px;
|
||||
color: var(--mention);
|
||||
background: color(from var(--mention) srgb r g b / 0.1);
|
||||
color: var(--MI_THEME-mention);
|
||||
background: color(from var(--MI_THEME-mention) srgb r g b / 0.1);
|
||||
|
||||
&.isMe {
|
||||
color: var(--mentionMe);
|
||||
background: color(from var(--mentionMe) srgb r g b / 0.1);
|
||||
color: var(--MI_THEME-mentionMe);
|
||||
background: color(from var(--MI_THEME-mentionMe) srgb r g b / 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -507,7 +507,7 @@ onBeforeUnmount(() => {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none !important;
|
||||
color: var(--menuFg, var(--fg));
|
||||
color: var(--menuFg, var(--MI_THEME-fg));
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -527,7 +527,7 @@ onBeforeUnmount(() => {
|
|||
outline: none;
|
||||
|
||||
&:not(:hover):not(:active)::before {
|
||||
outline: var(--focus) solid 2px;
|
||||
outline: var(--MI_THEME-focus) solid 2px;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -536,19 +536,19 @@ onBeforeUnmount(() => {
|
|||
&:hover,
|
||||
&:focus-visible:active,
|
||||
&:focus-visible.active {
|
||||
color: var(--menuHoverFg, var(--accent));
|
||||
color: var(--menuHoverFg, var(--MI_THEME-accent));
|
||||
|
||||
&::before {
|
||||
background-color: var(--menuHoverBg, var(--accentedBg));
|
||||
background-color: var(--menuHoverBg, var(--MI_THEME-accentedBg));
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:focus-visible):active,
|
||||
&:not(:focus-visible).active {
|
||||
color: var(--menuActiveFg, var(--fgOnAccent));
|
||||
color: var(--menuActiveFg, var(--MI_THEME-fgOnAccent));
|
||||
|
||||
&::before {
|
||||
background-color: var(--menuActiveBg, var(--accent));
|
||||
background-color: var(--menuActiveBg, var(--MI_THEME-accent));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -566,13 +566,13 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
|
||||
&.radio {
|
||||
--menuActiveFg: var(--accent);
|
||||
--menuActiveBg: var(--accentedBg);
|
||||
--menuActiveFg: var(--MI_THEME-accent);
|
||||
--menuActiveBg: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
&.parent {
|
||||
--menuActiveFg: var(--accent);
|
||||
--menuActiveBg: var(--accentedBg);
|
||||
--menuActiveFg: var(--MI_THEME-accent);
|
||||
--menuActiveBg: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
&.label {
|
||||
|
|
@ -637,14 +637,14 @@ onBeforeUnmount(() => {
|
|||
.indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 12px;
|
||||
animation: global-blink 1s infinite;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 8px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.radioIcon {
|
||||
|
|
@ -654,11 +654,11 @@ onBeforeUnmount(() => {
|
|||
height: 1em;
|
||||
vertical-align: -0.125em;
|
||||
border-radius: 50%;
|
||||
border: solid 2px var(--divider);
|
||||
background-color: var(--panel);
|
||||
border: solid 2px var(--MI_THEME-divider);
|
||||
background-color: var(--MI_THEME-panel);
|
||||
|
||||
&.radioChecked {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--MI_THEME-accent);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
@ -670,7 +670,7 @@ onBeforeUnmount(() => {
|
|||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--accent);
|
||||
background-color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const polygonPoints = ref('');
|
|||
const headX = ref<number | null>(null);
|
||||
const headY = ref<number | null>(null);
|
||||
const clock = ref<number | null>(null);
|
||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
|
||||
const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--MI_THEME-accent'));
|
||||
const color = accent.toRgbString();
|
||||
|
||||
function draw(): void {
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ defineExpose({
|
|||
|
||||
--root-margin: 24px;
|
||||
|
||||
--headerHeight: 46px;
|
||||
--headerHeightNarrow: 42px;
|
||||
--MI_THEME-headerHeight: 46px;
|
||||
--MI_THEME-headerHeightNarrow: 42px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
--root-margin: 16px;
|
||||
|
|
@ -105,24 +105,24 @@ defineExpose({
|
|||
.header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background: var(--windowHeader);
|
||||
background: var(--MI_THEME-windowHeader);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
height: var(--headerHeight);
|
||||
width: var(--headerHeight);
|
||||
height: var(--MI_THEME-headerHeight);
|
||||
width: var(--MI_THEME-headerHeight);
|
||||
|
||||
@media (max-width: 500px) {
|
||||
height: var(--headerHeightNarrow);
|
||||
width: var(--headerHeightNarrow);
|
||||
height: var(--MI_THEME-headerHeightNarrow);
|
||||
width: var(--MI_THEME-headerHeightNarrow);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
line-height: var(--headerHeight);
|
||||
line-height: var(--MI_THEME-headerHeight);
|
||||
padding-left: 32px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
|
|
@ -131,7 +131,7 @@ defineExpose({
|
|||
pointer-events: none;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
line-height: var(--headerHeightNarrow);
|
||||
line-height: var(--MI_THEME-headerHeightNarrow);
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@ defineExpose({
|
|||
.body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
container-type: size;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -126,8 +126,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti ti-ban"></i>
|
||||
</button>
|
||||
<button ref="reactButton" :class="$style.footerButton" class="_button" @click="toggleReact()">
|
||||
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
|
||||
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
|
||||
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
|
||||
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
|
||||
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
|
||||
<i v-else class="ti ti-plus"></i>
|
||||
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.reactionCount) }}</p>
|
||||
|
|
@ -643,7 +643,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
margin: auto;
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--focus);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -666,9 +666,9 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
right: 12px;
|
||||
padding: 0 4px;
|
||||
margin-bottom: 0 !important;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 32px var(--shadow);
|
||||
box-shadow: 0px 4px 32px var(--MI_THEME-shadow);
|
||||
}
|
||||
|
||||
.footerButton {
|
||||
|
|
@ -713,7 +713,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
padding: 16px 32px 8px 32px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
|
||||
& + .article {
|
||||
padding-top: 8px;
|
||||
|
|
@ -836,7 +836,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
|
||||
.showLessLabel {
|
||||
display: inline-block;
|
||||
background: var(--popup);
|
||||
background: var(--MI_THEME-popup);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -857,16 +857,16 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(0deg, var(--panel), color(from var(--panel) srgb r g b / 0));
|
||||
background: linear-gradient(0deg, var(--MI_THEME-panel), color(from var(--MI_THEME-panel) srgb r g b / 0));
|
||||
|
||||
&:hover > .collapsedLabel {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
}
|
||||
|
||||
.collapsedLabel {
|
||||
display: inline-block;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 6px 10px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 999px;
|
||||
|
|
@ -878,12 +878,12 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
.replyIcon {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
|
|
@ -903,7 +903,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
|
||||
.quoteNote {
|
||||
padding: 16px;
|
||||
border: dashed 1px var(--renote);
|
||||
border: dashed 1px var(--MI_THEME-renote);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -927,7 +927,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,8 +135,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<i class="ti ti-ban"></i>
|
||||
</button>
|
||||
<button ref="reactButton" :class="$style.noteFooterButton" class="_button" @click="toggleReact()">
|
||||
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--love);"></i>
|
||||
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--accent);"></i>
|
||||
<i v-if="appearNote.reactionAcceptance === 'likeOnly' && appearNote.myReaction != null" class="ti ti-heart-filled" style="color: var(--MI_THEME-love);"></i>
|
||||
<i v-else-if="appearNote.myReaction != null" class="ti ti-minus" style="color: var(--MI_THEME-accent);"></i>
|
||||
<i v-else-if="appearNote.reactionAcceptance === 'likeOnly'" class="ti ti-heart"></i>
|
||||
<i v-else class="ti ti-plus"></i>
|
||||
<p v-if="(appearNote.reactionAcceptance === 'likeOnly' || defaultStore.state.showReactionsCount) && appearNote.reactionCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.reactionCount) }}</p>
|
||||
|
|
@ -569,7 +569,7 @@ function loadConversation() {
|
|||
margin: auto;
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--focus);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -591,7 +591,7 @@ function loadConversation() {
|
|||
padding: 16px 32px 8px 32px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.renoteAvatar {
|
||||
|
|
@ -671,7 +671,7 @@ function loadConversation() {
|
|||
padding: 4px 6px;
|
||||
font-size: 80%;
|
||||
line-height: 1;
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -699,18 +699,18 @@ function loadConversation() {
|
|||
}
|
||||
|
||||
.noteReplyTarget {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.rn {
|
||||
margin-left: 4px;
|
||||
font-style: oblique;
|
||||
color: var(--renote);
|
||||
color: var(--MI_THEME-renote);
|
||||
}
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
|
|
@ -726,7 +726,7 @@ function loadConversation() {
|
|||
|
||||
.quoteNote {
|
||||
padding: 16px;
|
||||
border: dashed 1px var(--renote);
|
||||
border: dashed 1px var(--MI_THEME-renote);
|
||||
border-radius: 8px;
|
||||
overflow: clip;
|
||||
}
|
||||
|
|
@ -752,7 +752,7 @@ function loadConversation() {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
color: var(--MI_THEME-fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -762,17 +762,17 @@ function loadConversation() {
|
|||
opacity: 0.7;
|
||||
|
||||
&.reacted {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.reply:not(:first-child) {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
@ -784,7 +784,7 @@ function loadConversation() {
|
|||
}
|
||||
|
||||
.tabActive {
|
||||
border-bottom: solid 2px var(--accent);
|
||||
border-bottom: solid 2px var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
.tab_renotes {
|
||||
|
|
@ -804,12 +804,12 @@ function loadConversation() {
|
|||
|
||||
.reactionTab {
|
||||
padding: 4px 6px;
|
||||
border: solid 1px var(--divider);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.reactionTabActive {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ const mock = inject<boolean>('mock', false);
|
|||
margin: 0 .5em 0 0;
|
||||
padding: 1px 6px;
|
||||
font-size: 80%;
|
||||
border: solid 0.5px var(--divider);
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ if (props.detail) {
|
|||
}
|
||||
|
||||
.reply, .more {
|
||||
border-left: solid 0.5px var(--divider);
|
||||
border-left: solid 0.5px var(--MI_THEME-divider);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -156,7 +156,7 @@ if (props.detail) {
|
|||
.muted {
|
||||
text-align: center;
|
||||
padding: 8px !important;
|
||||
border: 1px solid var(--divider);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
margin: 8px 8px 0 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,16 +56,16 @@ defineExpose({
|
|||
.root {
|
||||
&.noGap {
|
||||
> .notes {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.noGap) {
|
||||
> .notes {
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
|
||||
.note {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
|
|||
--eventFollow: #36aed2;
|
||||
--eventRenote: #36d298;
|
||||
--eventReply: #007aff;
|
||||
--eventReactionHeart: var(--love);
|
||||
--eventReactionHeart: var(--MI_THEME-love);
|
||||
--eventReaction: #e99a0b;
|
||||
--eventAchievement: #cb9a11;
|
||||
--eventLogin: #007aff;
|
||||
|
|
@ -284,8 +284,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
|
|||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100%;
|
||||
background: var(--panel);
|
||||
box-shadow: 0 0 0 3px var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
box-shadow: 0 0 0 3px var(--MI_THEME-panel);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
|
@ -437,8 +437,8 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
|
|||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 100%;
|
||||
background: var(--panel);
|
||||
box-shadow: 0 0 0 3px var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
box-shadow: 0 0 0 3px var(--MI_THEME-panel);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue