forked from mirror/misskey
refactor(frontend): prefix css variables (UI) (#14739)
* refactor(frontend): prefix css variables * `MI_UI` -> `MI` * fix * `stickyBottom` * stickyTop
This commit is contained in:
parent
21e51567e7
commit
b668d161a9
@ -31,10 +31,10 @@ defineProps<{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--margin);
|
||||
padding: var(--MI-margin);
|
||||
margin-top: 4px;
|
||||
border: 1px solid var(--MI_THEME-inputBorder);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
background-color: var(--MI_THEME-panel);
|
||||
transition: background-color .1s, border-color .1s;
|
||||
|
||||
|
@ -29,9 +29,9 @@ defineProps<{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
padding: var(--margin);
|
||||
padding: var(--MI-margin);
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
background-color: #000;
|
||||
|
||||
&:hover {
|
||||
|
@ -190,7 +190,7 @@ const isDeleted = ref(false);
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -356,7 +356,7 @@ const isDeleted = ref(false);
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
position: sticky !important;
|
||||
top: calc(22px + var(--stickyTop, 0px));
|
||||
top: calc(22px + var(--MI-stickyTop, 0px));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@ -377,7 +377,7 @@ const isDeleted = ref(false);
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: sticky;
|
||||
bottom: calc(var(--stickyBottom, 0px) + 14px);
|
||||
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
|
||||
}
|
||||
|
||||
.showLessLabel {
|
||||
@ -430,7 +430,7 @@ const isDeleted = ref(false);
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -550,7 +550,7 @@ const isDeleted = ref(false);
|
||||
margin: 0 10px 0 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: calc(14px + var(--stickyTop, 0px));
|
||||
top: calc(14px + var(--MI-stickyTop, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -364,7 +364,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: sticky;
|
||||
bottom: calc(var(--stickyBottom, 0px) + 14px);
|
||||
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
|
||||
}
|
||||
|
||||
.showLessLabel {
|
||||
|
@ -53,7 +53,7 @@ const showContent = ref(false);
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
position: sticky !important;
|
||||
top: calc(16px + var(--stickyTop, 0px));
|
||||
top: calc(16px + var(--MI-stickyTop, 0px));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
@ -100,7 +100,7 @@ const collapsed = ref(isLong);
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: sticky;
|
||||
bottom: calc(var(--stickyBottom, 0px) + 14px);
|
||||
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
|
||||
}
|
||||
|
||||
.showLessLabel {
|
||||
|
@ -100,7 +100,7 @@ function top(ev: MouseEvent) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
overflow: hidden;
|
||||
|
||||
.headerClipIconRoot {
|
||||
|
@ -83,7 +83,7 @@ function top(ev: MouseEvent) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
overflow: hidden;
|
||||
|
||||
.headerClipIconRoot {
|
||||
|
@ -117,7 +117,7 @@ function top(ev: MouseEvent) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
overflow: hidden;
|
||||
|
||||
.avatarLink {
|
||||
|
@ -7,11 +7,11 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--radius: 12px;
|
||||
--marginFull: 14px;
|
||||
--marginHalf: 10px;
|
||||
--MI-radius: 12px;
|
||||
--MI-marginFull: 14px;
|
||||
--MI-marginHalf: 10px;
|
||||
|
||||
--margin: var(--marginFull);
|
||||
--MI-margin: var(--MI-marginFull);
|
||||
}
|
||||
|
||||
html {
|
||||
@ -218,12 +218,12 @@ rt {
|
||||
|
||||
._panel {
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
._margin {
|
||||
margin: var(--margin) 0;
|
||||
margin: var(--MI-margin) 0;
|
||||
}
|
||||
|
||||
._gaps_m {
|
||||
@ -241,7 +241,7 @@ rt {
|
||||
._gaps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
}
|
||||
|
||||
._buttons {
|
||||
@ -264,7 +264,7 @@ rt {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
&:active {
|
||||
border-color: var(--MI_THEME-accent);
|
||||
@ -273,14 +273,14 @@ rt {
|
||||
|
||||
._popup {
|
||||
background: var(--MI_THEME-popup);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
contain: content;
|
||||
}
|
||||
|
||||
._acrylic {
|
||||
background: var(--MI_THEME-acrylicPanel);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
|
||||
._fullinfo {
|
||||
|
@ -95,7 +95,7 @@ onUnmounted(() => {
|
||||
height: auto;
|
||||
|
||||
&.rounded {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
&.noBorder {
|
||||
|
@ -186,14 +186,14 @@ export async function common(createVue: () => App<Element>) {
|
||||
});
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
|
||||
document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||
document.documentElement.style.setProperty('--MI-modalBgFilter', v ? 'blur(4px)' : 'none');
|
||||
}, { immediate: true });
|
||||
|
||||
watch(defaultStore.reactiveState.useBlurEffect, v => {
|
||||
if (v) {
|
||||
document.documentElement.style.removeProperty('--blur');
|
||||
document.documentElement.style.removeProperty('--MI-blur');
|
||||
} else {
|
||||
document.documentElement.style.setProperty('--blur', 'none');
|
||||
document.documentElement.style.setProperty('--MI-blur', 'none');
|
||||
}
|
||||
}, { immediate: true });
|
||||
|
||||
|
@ -34,7 +34,7 @@ misskeyApi('users/show', { userId: props.movedTo }).then(u => user.value = u);
|
||||
font-size: 90%;
|
||||
background: var(--MI_THEME-infoWarnBg);
|
||||
color: var(--MI_THEME-error);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.link {
|
||||
|
@ -84,7 +84,7 @@ onMounted(() => {
|
||||
max-width: 480px;
|
||||
box-sizing: border-box;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
@ -863,8 +863,8 @@ onMounted(() => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backdrop-filter: var(--blur, blur(12px));
|
||||
backdrop-filter: var(--blur, blur(12px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(12px));
|
||||
backdrop-filter: var(--MI-blur, blur(12px));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -165,7 +165,7 @@ onUnmounted(() => {
|
||||
|
||||
.header {
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
top: var(--MI-stickyTop, 0px);
|
||||
left: 0;
|
||||
color: var(--MI_THEME-panelHeaderFg);
|
||||
background: var(--MI_THEME-panelHeaderBg);
|
||||
@ -201,7 +201,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.content {
|
||||
--stickyTop: 0px;
|
||||
--MI-stickyTop: 0px;
|
||||
|
||||
&.omitted {
|
||||
position: relative;
|
||||
|
@ -170,8 +170,8 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-backdrop-filter: var(--blur, blur(10px));
|
||||
backdrop-filter: var(--blur, blur(10px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(10px));
|
||||
backdrop-filter: var(--MI-blur, blur(10px));
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
@ -86,7 +86,7 @@ function cancel() {
|
||||
max-width: 100%;
|
||||
height: 40cqh;
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--MI_THEME-X5) 8px, var(--MI_THEME-X5) 14px);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
margin: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@ -103,6 +103,6 @@ function cancel() {
|
||||
padding: 3px 10px;
|
||||
background-color: var(--MI_THEME-X5);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
</style>
|
||||
|
@ -182,7 +182,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&:not(.date-separated-list-nogap) > *:not(:last-child) {
|
||||
margin-bottom: var(--margin);
|
||||
margin-bottom: var(--MI-margin);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -65,12 +65,12 @@ function neverShow() {
|
||||
.root {
|
||||
position: fixed;
|
||||
z-index: v-bind(zIndex);
|
||||
bottom: var(--margin);
|
||||
bottom: var(--MI-margin);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - (var(--margin) * 2));
|
||||
width: calc(100% - (var(--MI-margin) * 2));
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
@ -768,7 +768,7 @@ onBeforeUnmount(() => {
|
||||
.main {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: var(--margin);
|
||||
padding: var(--MI-margin);
|
||||
user-select: none;
|
||||
|
||||
&.fetching {
|
||||
|
@ -110,7 +110,7 @@ const emits = defineEmits<{
|
||||
|
||||
<style lang="scss" module>
|
||||
.extInstallerRoot {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
@ -118,9 +118,9 @@ onMounted(() => {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
position: sticky;
|
||||
top: var(--stickyTop, 0px);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(20px));
|
||||
top: var(--MI-stickyTop, 0px);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(20px));
|
||||
}
|
||||
|
||||
.title {
|
||||
|
@ -145,8 +145,8 @@ onMounted(() => {
|
||||
box-sizing: border-box;
|
||||
padding: 9px 12px 9px 12px;
|
||||
background: var(--MI_THEME-folderHeaderBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-radius: 6px;
|
||||
transition: border-radius 0.3s;
|
||||
|
||||
@ -236,12 +236,12 @@ onMounted(() => {
|
||||
.footer {
|
||||
position: sticky !important;
|
||||
z-index: 1;
|
||||
bottom: var(--stickyBottom, 0px);
|
||||
bottom: var(--MI-stickyBottom, 0px);
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
background-size: auto auto;
|
||||
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;
|
||||
|
@ -39,7 +39,7 @@ withDefaults(defineProps<{
|
||||
|
||||
<style module lang="scss">
|
||||
.root {
|
||||
--fukidashi-radius: var(--radius);
|
||||
--fukidashi-radius: var(--MI-radius);
|
||||
--fukidashi-bg: var(--MI_THEME-panel);
|
||||
|
||||
position: relative;
|
||||
|
@ -38,7 +38,7 @@ function close() {
|
||||
font-size: 90%;
|
||||
background: var(--MI_THEME-infoBg);
|
||||
color: var(--MI_THEME-infoFg);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.warn {
|
||||
|
@ -257,7 +257,7 @@ onMounted(() => {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 24px;
|
||||
max-height: 300px;
|
||||
|
||||
|
@ -392,7 +392,7 @@ onDeactivated(() => {
|
||||
container-type: inline-size;
|
||||
position: relative;
|
||||
border: .5px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
|
||||
&:focus-visible {
|
||||
@ -454,7 +454,7 @@ onDeactivated(() => {
|
||||
|
||||
.controlButton {
|
||||
padding: 6px;
|
||||
border-radius: calc(var(--radius) / 2);
|
||||
border-radius: calc(var(--MI-radius) / 2);
|
||||
font-size: 1.05rem;
|
||||
|
||||
&:hover {
|
||||
|
@ -226,8 +226,8 @@ html[data-color-scheme=light] .visible {
|
||||
position: absolute;
|
||||
border-radius: 999px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
width: 28px;
|
||||
|
@ -317,7 +317,7 @@ defineExpose({
|
||||
<style lang="scss">
|
||||
.pswp__bg {
|
||||
background: var(--MI_THEME-modalBg);
|
||||
backdrop-filter: var(--modalBgFilter);
|
||||
backdrop-filter: var(--MI-modalBgFilter);
|
||||
}
|
||||
|
||||
.pswp__alt-text-container {
|
||||
@ -338,8 +338,8 @@ defineExpose({
|
||||
color: var(--MI_THEME-fg);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: var(--margin);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--MI-margin);
|
||||
border-radius: var(--MI-radius);
|
||||
max-height: 8em;
|
||||
overflow-y: auto;
|
||||
text-shadow: var(--MI_THEME-bg) 0 0 10px, var(--MI_THEME-bg) 0 0 3px, var(--MI_THEME-bg) 0 0 3px;
|
||||
|
@ -658,7 +658,7 @@ onDeactivated(() => {
|
||||
|
||||
.controlButton {
|
||||
padding: 6px;
|
||||
border-radius: calc(var(--radius) / 2);
|
||||
border-radius: calc(var(--MI-radius) / 2);
|
||||
transition: background-color .2s ease-in-out;
|
||||
font-size: 1.05rem;
|
||||
|
||||
|
@ -90,7 +90,7 @@ defineExpose({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
contain: content;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
--root-margin: 24px;
|
||||
|
||||
@ -106,8 +106,8 @@ defineExpose({
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background: var(--MI_THEME-windowHeader);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
|
||||
.headerButton {
|
||||
|
@ -644,7 +644,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -810,7 +810,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
position: sticky !important;
|
||||
top: calc(22px + var(--stickyTop, 0px));
|
||||
top: calc(22px + var(--MI-stickyTop, 0px));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@ -831,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: sticky;
|
||||
bottom: calc(var(--stickyBottom, 0px) + 14px);
|
||||
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
|
||||
}
|
||||
|
||||
.showLessLabel {
|
||||
@ -884,7 +884,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
@ -998,7 +998,7 @@ function emitUpdReaction(emoji: string, delta: number) {
|
||||
margin: 0 10px 0 0;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: calc(14px + var(--stickyTop, 0px));
|
||||
top: calc(14px + var(--MI-stickyTop, 0px));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -570,7 +570,7 @@ function loadConversation() {
|
||||
width: calc(100% - 8px);
|
||||
height: calc(100% - 8px);
|
||||
border: dashed 2px var(--MI_THEME-focus);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@ -711,7 +711,7 @@ function loadConversation() {
|
||||
|
||||
.translation {
|
||||
border: solid 0.5px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
@ -51,7 +51,7 @@ const showContent = ref(false);
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
position: sticky !important;
|
||||
top: calc(16px + var(--stickyTop, 0px));
|
||||
top: calc(16px + var(--MI-stickyTop, 0px));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
@ -66,7 +66,7 @@ defineExpose({
|
||||
|
||||
.note {
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -47,7 +47,7 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" module>
|
||||
.content {
|
||||
--stickyTop: 0px;
|
||||
--MI-stickyTop: 0px;
|
||||
|
||||
&.omitted {
|
||||
position: relative;
|
||||
|
@ -42,7 +42,7 @@ const props = defineProps<{
|
||||
.eyeCatchingImageRoot {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
border-radius: var(--MI-radius) var(--MI-radius) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -67,7 +67,7 @@ const props = defineProps<{
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
pointer-events: none;
|
||||
box-shadow: inset 0 0 0 2px var(--MI_THEME-focus);
|
||||
}
|
||||
@ -75,14 +75,14 @@ const props = defineProps<{
|
||||
|
||||
> .thumbnail {
|
||||
& + article {
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
border-radius: 0 0 var(--MI-radius) var(--MI-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> article {
|
||||
background-color: var(--MI_THEME-panel);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
> header {
|
||||
margin-bottom: 8px;
|
||||
|
@ -181,6 +181,6 @@ defineExpose({
|
||||
min-height: 100%;
|
||||
background: var(--MI_THEME-bg);
|
||||
|
||||
--margin: var(--marginHalf);
|
||||
--MI-margin: var(--MI-marginHalf);
|
||||
}
|
||||
</style>
|
||||
|
@ -21,7 +21,7 @@ defineProps<{
|
||||
padding: 16px;
|
||||
background: var(--MI_THEME-infoWarnBg);
|
||||
color: var(--MI_THEME-infoWarnFg);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
|
@ -70,7 +70,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
|
||||
max-height: 450px;
|
||||
box-sizing: border-box;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -83,7 +83,7 @@ function onLogin(res: Misskey.entities.SigninFlowResponse & { finished: true })
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
@ -170,7 +170,7 @@ async function updateAgreeNote(v: boolean) {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: calc(var(--stickyTop, 0px) + 8px);
|
||||
top: calc(var(--MI-stickyTop, 0px) + 8px);
|
||||
counter-increment: item;
|
||||
content: counter(item);
|
||||
width: 32px;
|
||||
|
@ -63,12 +63,12 @@ function close() {
|
||||
.root {
|
||||
position: fixed;
|
||||
z-index: v-bind(zIndex);
|
||||
bottom: var(--margin);
|
||||
bottom: var(--MI-margin);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - (var(--margin) * 2));
|
||||
width: calc(100% - (var(--MI-margin) * 2));
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
@ -97,7 +97,7 @@ const collapsed = ref(isLong);
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: sticky;
|
||||
bottom: calc(var(--stickyBottom, 0px) + 14px);
|
||||
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
|
||||
}
|
||||
|
||||
.showLessLabel {
|
||||
|
@ -263,8 +263,8 @@ onMounted(async () => {
|
||||
padding: 12px;
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
|
||||
.switchBox {
|
||||
|
@ -226,7 +226,7 @@ onUnmounted(() => {
|
||||
|
||||
.mfmPreview {
|
||||
padding: 12px;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
box-sizing: border-box;
|
||||
min-height: 130px;
|
||||
pointer-events: none;
|
||||
|
@ -137,7 +137,7 @@ function enableAll(): void {
|
||||
margin: 8px -6px 0;
|
||||
padding: 24px 6px 6px;
|
||||
border: 2px solid var(--MI_THEME-error);
|
||||
border-radius: calc(var(--radius) / 2);
|
||||
border-radius: calc(var(--MI-radius) / 2);
|
||||
}
|
||||
|
||||
.adminPermissionsHeader {
|
||||
|
@ -105,7 +105,7 @@ function removeReaction(emoji) {
|
||||
|
||||
<style lang="scss" module>
|
||||
.exampleNoteRoot {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
border: var(--MI_THEME-panelBorder);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
@ -81,7 +81,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
|
||||
<style lang="scss" module>
|
||||
.exampleRoot {
|
||||
max-width: none!important;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
border: var(--MI_THEME-panelBorder);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
@ -91,7 +91,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
|
||||
|
||||
<style lang="scss" module>
|
||||
.exampleRoot {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
border: var(--MI_THEME-panelBorder);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
@ -31,7 +31,7 @@ import { basicTimelineIconClass, basicTimelineTypes } from '@/timelines.js';
|
||||
|
||||
<style lang="scss" module>
|
||||
.exampleNoteRoot {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
border: var(--MI_THEME-panelBorder);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
@ -47,7 +47,7 @@ onMounted(() => {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.title {
|
||||
|
@ -142,7 +142,7 @@ async function del() {
|
||||
left: 0;
|
||||
padding: 12px;
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -39,6 +39,6 @@ const props = withDefaults(defineProps<{
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: var(--margin);
|
||||
grid-gap: var(--MI-margin);
|
||||
}
|
||||
</style>
|
||||
|
@ -62,7 +62,7 @@ const popularUsers: Paging = {
|
||||
.users {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
grid-gap: var(--margin);
|
||||
grid-gap: var(--MI-margin);
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
@ -107,7 +107,7 @@ function showMenu(ev: MouseEvent) {
|
||||
.panel {
|
||||
position: relative;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
|
@ -48,7 +48,7 @@ watch(() => props.showing, () => {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
width: 250px;
|
||||
|
||||
&.iconOnly {
|
||||
|
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<div :class="$style.root">
|
||||
<template v-if="edit">
|
||||
<header :class="$style.editHeader">
|
||||
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
|
||||
<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--MI-margin)" data-cy-widget-select>
|
||||
<template #label>{{ i18n.ts.selectWidget }}</template>
|
||||
<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.ts._widgets[widget] }}</option>
|
||||
</MkSelect>
|
||||
@ -123,7 +123,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
|
||||
|
||||
.widget {
|
||||
contain: content;
|
||||
margin: var(--margin) 0;
|
||||
margin: var(--MI-margin) 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
|
@ -502,7 +502,7 @@ defineExpose({
|
||||
contain: content;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -515,8 +515,8 @@ defineExpose({
|
||||
user-select: none;
|
||||
height: var(--height);
|
||||
background: var(--MI_THEME-windowHeader);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
//border-bottom: solid 1px var(--MI_THEME-divider);
|
||||
font-size: 90%;
|
||||
font-weight: bold;
|
||||
|
@ -130,8 +130,8 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-bottom: solid 0.5px var(--MI_THEME-divider);
|
||||
width: 100%;
|
||||
}
|
||||
@ -145,7 +145,7 @@ onUnmounted(() => {
|
||||
.upper {
|
||||
--height: 50px;
|
||||
display: flex;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
height: var(--height);
|
||||
|
||||
.tabs:first-child {
|
||||
|
@ -69,28 +69,28 @@ onMounted(() => {
|
||||
|
||||
watch(childStickyTop, () => {
|
||||
if (bodyEl.value == null) return;
|
||||
bodyEl.value.style.setProperty('--stickyTop', `${childStickyTop.value}px`);
|
||||
bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
watch(childStickyBottom, () => {
|
||||
if (bodyEl.value == null) return;
|
||||
bodyEl.value.style.setProperty('--stickyBottom', `${childStickyBottom.value}px`);
|
||||
bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
|
||||
}, {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
if (headerEl.value != null) {
|
||||
headerEl.value.style.position = 'sticky';
|
||||
headerEl.value.style.top = 'var(--stickyTop, 0)';
|
||||
headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
|
||||
headerEl.value.style.zIndex = '1';
|
||||
observer.observe(headerEl.value);
|
||||
}
|
||||
|
||||
if (footerEl.value != null) {
|
||||
footerEl.value.style.position = 'sticky';
|
||||
footerEl.value.style.bottom = 'var(--stickyBottom, 0)';
|
||||
footerEl.value.style.bottom = 'var(--MI-stickyBottom, 0)';
|
||||
footerEl.value.style.zIndex = '1';
|
||||
observer.observe(footerEl.value);
|
||||
}
|
||||
|
@ -28,8 +28,8 @@ const props = defineProps<{
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--margin);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: var(--MI-margin);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -29,7 +29,7 @@ onMounted(() => {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.mediaList {
|
||||
|
@ -36,6 +36,6 @@ onMounted(() => {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
border: 1px solid var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
</style>
|
||||
|
@ -441,7 +441,7 @@ definePageMetadata(() => ({
|
||||
.znqjceqz {
|
||||
> .about {
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
> .treasure {
|
||||
position: absolute;
|
||||
|
@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #prefix><i class="ti ti-search"></i></template>
|
||||
<template #label>{{ i18n.ts.host }}</template>
|
||||
</MkInput>
|
||||
<FormSplit style="margin-top: var(--margin);">
|
||||
<FormSplit style="margin-top: var(--MI-margin);">
|
||||
<MkSelect v-model="state">
|
||||
<template #label>{{ i18n.ts.state }}</template>
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
|
@ -183,7 +183,7 @@ const initStats = () => misskeyApi('stats', {});
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
position: sticky;
|
||||
top: calc(var(--stickyTop, 0px) + 8px);
|
||||
top: calc(var(--MI-stickyTop, 0px) + 8px);
|
||||
counter-increment: item;
|
||||
content: counter(item);
|
||||
width: 32px;
|
||||
|
@ -156,7 +156,7 @@ function removeSelf() {
|
||||
|
||||
.item {
|
||||
border: solid 2px var(--MI_THEME-divider);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 12px;
|
||||
|
||||
&:hover {
|
||||
|
@ -156,8 +156,8 @@ onUnmounted(() => {
|
||||
--height: 60px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
|
||||
> .buttons {
|
||||
--margin: 8px;
|
||||
|
@ -296,8 +296,8 @@ onMounted(async () => {
|
||||
padding: 12px;
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
|
||||
.systemWebhook {
|
||||
|
@ -266,7 +266,7 @@ definePageMetadata(() => ({
|
||||
padding: 32px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: var(--margin);
|
||||
margin-bottom: var(--MI-margin);
|
||||
}
|
||||
}
|
||||
.input {
|
||||
|
@ -183,7 +183,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -138,7 +138,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #prefix><i class="ti ti-search"></i></template>
|
||||
<template #label>{{ i18n.ts.host }}</template>
|
||||
</MkInput>
|
||||
<FormSplit style="margin-top: var(--margin);">
|
||||
<FormSplit style="margin-top: var(--MI-margin);">
|
||||
<MkSelect v-model="state">
|
||||
<template #label>{{ i18n.ts.state }}</template>
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #header><XHeader :actions="headerActions"/></template>
|
||||
<MkSpacer :contentMax="900">
|
||||
<div class="_gaps">
|
||||
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
|
||||
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ i18n.ts.instance }}</template>
|
||||
<option value="combined">{{ i18n.ts.all }}</option>
|
||||
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #label>{{ i18n.ts.host }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
|
||||
<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
|
||||
<template #label>User ID</template>
|
||||
</MkInput>
|
||||
|
@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</template>
|
||||
|
||||
<div>
|
||||
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
|
||||
<div style="flex: 1;">{{ i18n.ts.moderator }}: <MkA :to="`/admin/user/${log.userId}`" class="_link">@{{ log.user?.username }}</MkA></div>
|
||||
<div style="flex: 1;">{{ i18n.ts.dateAndTime }}: <MkTime :time="log.createdAt" mode="detail"/></div>
|
||||
</div>
|
||||
|
@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="900">
|
||||
<div>
|
||||
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
|
||||
<MkSelect v-model="type" style="margin: 0; flex: 1;">
|
||||
<template #label>{{ i18n.ts.type }}</template>
|
||||
<option :value="null">{{ i18n.ts.all }}</option>
|
||||
@ -19,8 +19,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
</MkInput>
|
||||
</div>
|
||||
|
||||
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--margin);">
|
||||
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--margin: 8px;">
|
||||
<MkPagination v-slot="{items}" ref="logs" :pagination="pagination" style="margin-top: var(--MI-margin);">
|
||||
<MkDateSeparatedList v-slot="{ item }" :items="items" :noGap="false" style="--MI-margin: 8px;">
|
||||
<XModLog :key="item.id" :log="item"/>
|
||||
</MkDateSeparatedList>
|
||||
</MkPagination>
|
||||
|
@ -157,7 +157,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -120,7 +120,7 @@ onUnmounted(() => {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
> .title {
|
||||
font-size: 0.85em;
|
||||
|
@ -136,7 +136,7 @@ onUnmounted(() => {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
|
||||
.chartTitle {
|
||||
|
@ -95,7 +95,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -97,26 +97,26 @@ definePageMetadata(() => ({
|
||||
<style lang="scss" module>
|
||||
.new {
|
||||
position: sticky;
|
||||
top: calc(var(--stickyTop, 0px) + 16px);
|
||||
top: calc(var(--MI-stickyTop, 0px) + 16px);
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
margin: calc(-0.675em - 8px) 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: calc(-0.675em - 8px - var(--margin));
|
||||
margin-top: calc(-0.675em - 8px - var(--MI-margin));
|
||||
}
|
||||
}
|
||||
|
||||
.newButton {
|
||||
display: block;
|
||||
margin: var(--margin) auto 0 auto;
|
||||
margin: var(--MI-margin) auto 0 auto;
|
||||
padding: 8px 16px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.tl {
|
||||
background: var(--MI_THEME-bg);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
|
@ -124,7 +124,7 @@ definePageMetadata(() => ({
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
}
|
||||
|
||||
.preview {
|
||||
@ -132,7 +132,7 @@ definePageMetadata(() => ({
|
||||
place-items: center;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: var(--margin);
|
||||
gap: var(--MI-margin);
|
||||
}
|
||||
|
||||
.previewItem {
|
||||
@ -142,7 +142,7 @@ definePageMetadata(() => ({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
&.light {
|
||||
background: #eee;
|
||||
@ -157,7 +157,7 @@ definePageMetadata(() => ({
|
||||
.editorWrapper {
|
||||
grid-template-columns: 200px 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
gap: calc(var(--margin) * 2);
|
||||
gap: calc(var(--MI-margin) * 2);
|
||||
}
|
||||
|
||||
.preview {
|
||||
|
@ -269,12 +269,12 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.main {
|
||||
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
|
||||
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
|
||||
}
|
||||
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
@ -317,14 +317,14 @@ definePageMetadata(() => ({
|
||||
.ogwlenmc {
|
||||
> .local {
|
||||
.empty {
|
||||
margin: var(--margin);
|
||||
margin: var(--MI-margin);
|
||||
}
|
||||
|
||||
.ldhfsamy {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: var(--margin) 0;
|
||||
margin: var(--MI-margin) 0;
|
||||
|
||||
> .emoji {
|
||||
display: flex;
|
||||
@ -369,14 +369,14 @@ definePageMetadata(() => ({
|
||||
|
||||
> .remote {
|
||||
.empty {
|
||||
margin: var(--margin);
|
||||
margin: var(--MI-margin);
|
||||
}
|
||||
|
||||
.ldhfsamy {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: var(--margin) 0;
|
||||
margin: var(--MI-margin) 0;
|
||||
|
||||
> .emoji {
|
||||
display: flex;
|
||||
|
@ -232,7 +232,7 @@ onMounted(async () => {
|
||||
|
||||
.filePreviewRoot {
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
// MkMediaList 内の上部マージン 4px
|
||||
padding: calc(1rem - 4px) 1rem 1rem;
|
||||
}
|
||||
@ -285,7 +285,7 @@ onMounted(async () => {
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
font-size: .8rem;
|
||||
|
||||
>.fileNameEditIcon {
|
||||
@ -322,7 +322,7 @@ onMounted(async () => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
|
||||
.kvEditIcon {
|
||||
display: inline-block;
|
||||
|
@ -245,7 +245,7 @@ async function del() {
|
||||
padding: 12px;
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
}
|
||||
</style>
|
||||
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<template>
|
||||
<MkSpacer :contentMax="800">
|
||||
<MkTab v-model="tab" style="margin-bottom: var(--margin);">
|
||||
<MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
|
||||
<option value="notes">{{ i18n.ts.notes }}</option>
|
||||
<option value="polls">{{ i18n.ts.poll }}</option>
|
||||
</MkTab>
|
||||
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
<template>
|
||||
<MkSpacer :contentMax="1200">
|
||||
<MkTab v-model="origin" style="margin-bottom: var(--margin);">
|
||||
<MkTab v-model="origin" style="margin-bottom: var(--MI-margin);">
|
||||
<option value="local">{{ i18n.ts.local }}</option>
|
||||
<option value="remote">{{ i18n.ts.remote }}</option>
|
||||
</MkTab>
|
||||
|
@ -47,6 +47,6 @@ definePageMetadata(() => ({
|
||||
<style lang="scss" module>
|
||||
.note {
|
||||
background: var(--MI_THEME-panel);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
}
|
||||
</style>
|
||||
|
@ -467,7 +467,7 @@ definePageMetadata(() => ({
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.footer {
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
border-top: solid .5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
@ -130,6 +130,6 @@ definePageMetadata(() => ({
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: 0 var(--margin);
|
||||
margin: 0 var(--MI-margin);
|
||||
}
|
||||
</style>
|
||||
|
@ -321,7 +321,7 @@ definePageMetadata(() => ({
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: var(--margin);
|
||||
margin: var(--MI-margin);
|
||||
|
||||
> .post {
|
||||
|
||||
|
@ -250,7 +250,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.extInstallerRoot {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
background: var(--MI_THEME-panel);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
@ -108,7 +108,7 @@ definePageMetadata(() => ({
|
||||
</script>
|
||||
<style lang="scss" module>
|
||||
.main {
|
||||
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
|
||||
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
|
||||
}
|
||||
|
||||
.userItem {
|
||||
|
@ -199,7 +199,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style lang="scss" module>
|
||||
.main {
|
||||
min-height: calc(100cqh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
|
||||
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
|
||||
}
|
||||
|
||||
.userItem {
|
||||
@ -234,8 +234,8 @@ definePageMetadata(() => ({
|
||||
}
|
||||
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
</style>
|
||||
|
@ -170,11 +170,11 @@ definePageMetadata(() => ({
|
||||
}
|
||||
|
||||
.loadNext {
|
||||
margin-bottom: var(--margin);
|
||||
margin-bottom: var(--MI-margin);
|
||||
}
|
||||
|
||||
.loadPrev {
|
||||
margin-top: var(--margin);
|
||||
margin-top: var(--MI-margin);
|
||||
}
|
||||
|
||||
.loadButton {
|
||||
@ -182,7 +182,7 @@ definePageMetadata(() => ({
|
||||
}
|
||||
|
||||
.note {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
</style>
|
||||
|
@ -102,7 +102,7 @@ definePageMetadata(() => ({
|
||||
|
||||
<style module lang="scss">
|
||||
.notifications {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
|
@ -365,7 +365,7 @@ definePageMetadata(() => ({
|
||||
}
|
||||
|
||||
.pageMain {
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--MI-radius);
|
||||
padding: 2rem;
|
||||
background: var(--MI_THEME-panel);
|
||||
box-sizing: border-box;
|
||||
@ -374,7 +374,7 @@ definePageMetadata(() => ({
|
||||
.pageBanner {
|
||||
width: calc(100% + 4rem);
|
||||
margin: -2rem -2rem 1.5rem;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
border-radius: var(--MI-radius) var(--MI-radius) 0 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
@ -458,7 +458,7 @@ definePageMetadata(() => ({
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--marginHalf);
|
||||
gap: var(--MI-marginHalf);
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
@ -479,7 +479,7 @@ definePageMetadata(() => ({
|
||||
> .other {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: var(--marginHalf);
|
||||
gap: var(--MI-marginHalf);
|
||||
}
|
||||
}
|
||||
|
||||
@ -526,11 +526,11 @@ definePageMetadata(() => ({
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--marginHalf);
|
||||
gap: var(--MI-marginHalf);
|
||||
}
|
||||
|
||||
.relatedPagesRoot {
|
||||
padding: var(--margin);
|
||||
padding: var(--MI-margin);
|
||||
}
|
||||
|
||||
.relatedPagesItem > article {
|
||||
|
@ -290,8 +290,8 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.footer {
|
||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||
backdrop-filter: var(--blur, blur(15px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
|
||||
backdrop-filter: var(--MI-blur, blur(15px));
|
||||
background: var(--MI_THEME-acrylicBg);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user