Merge tag '2024.10.1' into feature/2024.10
This commit is contained in:
dakkar
commit
f079edaf3c
454 changed files with 9728 additions and 3363 deletions
|
|
@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<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>
|
||||
<span :class="$style.body">{{ announcement.text }}</span>
|
||||
|
|
@ -30,7 +30,7 @@ import { $i } from '@/account.js';
|
|||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 15px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -44,8 +44,8 @@ import { $i } from '@/account.js';
|
|||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
background: var(--accent);
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--MI_THEME-accent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
@container (max-width: 1000px) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -129,26 +129,26 @@ function getPointerEvents() {
|
|||
.notifications {
|
||||
position: fixed;
|
||||
z-index: 3900000;
|
||||
padding: 0 var(--margin);
|
||||
padding: 0 var(--MI-margin);
|
||||
display: flex;
|
||||
|
||||
&.notificationsPosition_leftTop {
|
||||
top: var(--margin);
|
||||
top: var(--MI-margin);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightTop {
|
||||
top: var(--margin);
|
||||
top: var(--MI-margin);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_leftBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -246,8 +246,8 @@ function getPointerEvents() {
|
|||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: var(--accent);
|
||||
border-left-color: var(--accent);
|
||||
border-top-color: var(--MI_THEME-accent);
|
||||
border-left-color: var(--MI_THEME-accent);
|
||||
border-radius: 50%;
|
||||
animation: progress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="item === '-'" :class="$style.divider"></div>
|
||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button" :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]" :activeClass="$style.active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator" class="_blink">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
|
|
@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<button :class="$style.item" class="_button" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA :class="$style.item" :activeClass="$style.active" to="/settings">
|
||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
|
||||
|
|
@ -82,7 +82,7 @@ function more() {
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
|
||||
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -94,8 +94,8 @@ function more() {
|
|||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -135,8 +135,8 @@ function more() {
|
|||
bottom: 0;
|
||||
padding: 20px 0;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -144,7 +144,7 @@ function more() {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
|
|
@ -160,12 +160,12 @@ function more() {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-ellipse);
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&::before {
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -209,7 +209,7 @@ function more() {
|
|||
|
||||
.divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -223,15 +223,15 @@ function more() {
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
color: var(--MI_THEME-navFg);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
|
|
@ -247,7 +247,7 @@ function more() {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-ellipse);
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -262,9 +262,8 @@ function more() {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
|
||||
>
|
||||
<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
|
||||
<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator" class="_blink">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
|
|
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<button class="_button" :class="$style.item" @click="more">
|
||||
<i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.more }}</span>
|
||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
|
||||
<span v-if="otherMenuItemIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active" to="/settings">
|
||||
<i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.settings }}</span>
|
||||
|
|
@ -111,7 +111,7 @@ function more(ev: MouseEvent) {
|
|||
.root {
|
||||
--nav-width: 250px;
|
||||
--nav-icon-only-width: 80px;
|
||||
--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
|
||||
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
|
||||
|
||||
flex: 0 0 var(--nav-width);
|
||||
width: var(--nav-width);
|
||||
|
|
@ -129,7 +129,7 @@ function more(ev: MouseEvent) {
|
|||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
contain: strict;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -146,8 +146,8 @@ function more(ev: MouseEvent) {
|
|||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -172,7 +172,7 @@ function more(ev: MouseEvent) {
|
|||
outline: none;
|
||||
|
||||
> .instanceIcon {
|
||||
outline: 2px solid var(--focus);
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -196,8 +196,8 @@ function more(ev: MouseEvent) {
|
|||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -205,7 +205,7 @@ function more(ev: MouseEvent) {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
|
|
@ -221,21 +221,21 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-ellipse);
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--fgOnAccent);
|
||||
outline: 2px solid var(--MI_THEME-fgOnAccent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&::before {
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -265,7 +265,7 @@ function more(ev: MouseEvent) {
|
|||
outline: none;
|
||||
|
||||
> .avatar {
|
||||
box-shadow: 0 0 0 4px var(--focus);
|
||||
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -291,7 +291,7 @@ function more(ev: MouseEvent) {
|
|||
|
||||
.divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -305,28 +305,28 @@ function more(ev: MouseEvent) {
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
color: var(--MI_THEME-navFg);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--focus);
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active, &:focus {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -340,7 +340,7 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-ellipse);
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -355,9 +355,8 @@ function more(ev: MouseEvent) {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
@ -387,8 +386,8 @@ function more(ev: MouseEvent) {
|
|||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.instance {
|
||||
|
|
@ -400,7 +399,7 @@ function more(ev: MouseEvent) {
|
|||
outline: none;
|
||||
|
||||
> .instanceIcon {
|
||||
outline: 2px solid var(--focus);
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -417,8 +416,8 @@ function more(ev: MouseEvent) {
|
|||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -440,28 +439,28 @@ function more(ev: MouseEvent) {
|
|||
width: 52px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: var(--radius-full);
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--fgOnAccent);
|
||||
outline: 2px solid var(--MI_THEME-fgOnAccent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&::before {
|
||||
background: var(--accentLighten);
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
position: relative;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
}
|
||||
|
||||
.postText {
|
||||
|
|
@ -479,7 +478,7 @@ function more(ev: MouseEvent) {
|
|||
outline: none;
|
||||
|
||||
> .avatar {
|
||||
box-shadow: 0 0 0 4px var(--focus);
|
||||
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -501,7 +500,7 @@ function more(ev: MouseEvent) {
|
|||
.divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -515,14 +514,14 @@ function more(ev: MouseEvent) {
|
|||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--focus);
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active, &:focus {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
|
|
@ -536,7 +535,7 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: var(--radius-ellipse);
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
> .icon,
|
||||
|
|
@ -560,9 +559,8 @@ function more(ev: MouseEvent) {
|
|||
position: absolute;
|
||||
top: 6px;
|
||||
left: 24px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 15px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -81,7 +81,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
.name {
|
||||
padding: 0 var(--nameMargin);
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@ onUnmounted(() => {
|
|||
.root {
|
||||
position: fixed;
|
||||
z-index: v-bind(zIndex);
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
right: var(--margin);
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
right: var(--MI-margin);
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
font-size: 0.9em;
|
||||
|
|
|
|||
|
|
@ -125,10 +125,10 @@ const zIndex = os.claimZIndex('high');
|
|||
height: 8px;
|
||||
}
|
||||
.mk-uploader > ol > li > progress::-webkit-progress-value {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
}
|
||||
.mk-uploader > ol > li > progress::-webkit-progress-bar {
|
||||
//background: var(--accentAlpha01);
|
||||
//background: var(--MI_THEME-accentAlpha01);
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="item === '-'" class="divider"></div>
|
||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="navbarItemDef[item].title" class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
|
||||
</component>
|
||||
</template>
|
||||
<div class="divider"></div>
|
||||
|
|
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<button v-click-anime class="item _button" @click="more">
|
||||
<i class="ti ti-dots ti-fw"></i>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
|
@ -104,7 +104,7 @@ onMounted(() => {
|
|||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
|
||||
> .body {
|
||||
max-width: 1380px;
|
||||
|
|
@ -140,18 +140,17 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +158,7 @@ onMounted(() => {
|
|||
display: inline-block;
|
||||
height: 16px;
|
||||
margin: 0 10px;
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .instance {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<div v-if="item === '-'" class="divider"></div>
|
||||
<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
|
||||
<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator">
|
||||
<span v-if="navbarItemDef[item].indicated" class="indicator _blink">
|
||||
<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
|
||||
<i v-else class="_indicatorCircle"></i>
|
||||
</span>
|
||||
|
|
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<button v-click-anime class="item _button" @click="more">
|
||||
<i class="ti ti-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
|
||||
<span v-if="otherNavItemIndicated" class="indicator _blink"><i class="_indicatorCircle"></i></span>
|
||||
</button>
|
||||
<MkA v-click-anime class="item" activeClass="active" to="/settings" :behavior="settingsWindowed ? 'window' : null">
|
||||
<i class="ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
|
||||
|
|
@ -159,7 +159,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
|
||||
> .divider {
|
||||
margin: 10px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .post {
|
||||
|
|
@ -224,9 +224,8 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
@ -237,11 +236,11 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<XSidebar/>
|
||||
</div>
|
||||
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
|
||||
<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
<XWidgets place="left" :marginTop="'var(--MI-margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
</div>
|
||||
|
||||
<main class="main" @contextmenu.stop="onContextmenu">
|
||||
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</main>
|
||||
|
||||
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--MI-margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -216,8 +216,8 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
background: var(--MI_THEME-wallpaperOverlay);
|
||||
//backdrop-filter: var(--MI-blur, blur(4px));
|
||||
}
|
||||
|
||||
> .columns {
|
||||
|
|
@ -249,17 +249,16 @@ onMounted(() => {
|
|||
min-width: 0;
|
||||
width: 750px;
|
||||
margin: 0 16px 0 0;
|
||||
border-left: solid 1px var(--divider);
|
||||
border-right: solid 1px var(--divider);
|
||||
border-left: solid 1px var(--MI_THEME-divider);
|
||||
border-right: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: 0;
|
||||
overflow: clip;
|
||||
--margin: 12px;
|
||||
--MI-margin: 12px;
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -281,13 +280,13 @@ onMounted(() => {
|
|||
&.withGlobalHeader {
|
||||
> .main {
|
||||
margin-top: 0;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: var(--radius);
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
--MI-stickyTop: var(--globalHeaderHeight);
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
--MI-stickyTop: var(--globalHeaderHeight);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +295,7 @@ onMounted(() => {
|
|||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .main {
|
||||
|
|
@ -318,10 +317,10 @@ onMounted(() => {
|
|||
right: 0;
|
||||
z-index: 1001;
|
||||
height: 100dvh;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
> .ivnzpscs {
|
||||
|
|
|
|||
|
|
@ -50,11 +50,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
|
||||
<div v-if="isMobile" :class="$style.nav">
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -97,6 +97,7 @@ import { v4 as uuid } from 'uuid';
|
|||
import XCommon from './_common_/common.vue';
|
||||
import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
|
||||
import type { ColumnType } from './deck/deck-store.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import XSidebar from '@/ui/_common_/navbar.vue';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
|
|
@ -118,7 +119,6 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
|
|||
import XDirectColumn from '@/ui/deck/direct-column.vue';
|
||||
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
|
||||
|
||||
|
|
@ -305,7 +305,7 @@ body {
|
|||
.root {
|
||||
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
|
||||
|
||||
--margin: var(--marginHalf);
|
||||
--MI-margin: var(--MI-marginHalf);
|
||||
|
||||
--columnGap: 6px;
|
||||
|
||||
|
|
@ -332,7 +332,7 @@ body {
|
|||
overflow-x: auto;
|
||||
overflow-y: clip;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--deckBg);
|
||||
background: var(--MI_THEME-deckBg);
|
||||
|
||||
&.center {
|
||||
> .section:first-of-type {
|
||||
|
|
@ -414,7 +414,7 @@ body {
|
|||
contain: strict;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -428,10 +428,10 @@ body {
|
|||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(32px));
|
||||
backdrop-filter: var(--MI-blur, blur(32px));
|
||||
background-color: var(--MI_THEME-header);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
|
|
@ -443,30 +443,30 @@ body {
|
|||
margin: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--accent);
|
||||
background: hsl(from var(--panel) h s calc(l - 2));
|
||||
color: var(--MI_THEME-accent);
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
color: var(--fgOnAccent);
|
||||
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)));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
}
|
||||
|
||||
&: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)));
|
||||
color: var(--fgOnAccent);
|
||||
}
|
||||
}
|
||||
|
|
@ -480,9 +480,8 @@ body {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<svg viewBox="0 0 256 128" :class="$style.tabShape">
|
||||
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
|
||||
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckBg);"/>
|
||||
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--MI_THEME-deckBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div :class="$style.color"></div>
|
||||
|
|
@ -299,7 +299,7 @@ function onDrop(ev) {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--focus);
|
||||
background: var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -313,7 +313,7 @@ function onDrop(ev) {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--focus);
|
||||
background: var(--MI_THEME-focus);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -331,19 +331,19 @@ function onDrop(ev) {
|
|||
}
|
||||
|
||||
&.naked {
|
||||
background: var(--acrylicBg) !important;
|
||||
-webkit-backdrop-filter: var(--blur, blur(10px));
|
||||
backdrop-filter: var(--blur, blur(10px));
|
||||
background: var(--MI_THEME-acrylicBg) !important;
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(10px));
|
||||
backdrop-filter: var(--MI-blur, blur(10px));
|
||||
|
||||
> .header {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
}
|
||||
|
||||
> .body {
|
||||
background: transparent !important;
|
||||
scrollbar-color: var(--scrollbarHandle) transparent;
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
|
|
@ -352,12 +352,12 @@ function onDrop(ev) {
|
|||
}
|
||||
|
||||
&.paged {
|
||||
background: var(--bg) !important;
|
||||
background: var(--MI_THEME-bg) !important;
|
||||
|
||||
> .body {
|
||||
background: var(--bg) !important;
|
||||
background: var(--MI_THEME-bg) !important;
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-color: var(--scrollbarHandle) transparent;
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: inherit;
|
||||
|
|
@ -374,9 +374,9 @@ function onDrop(ev) {
|
|||
height: var(--deckColumnHeaderHeight);
|
||||
padding: 0 16px 0 30px;
|
||||
font-size: 0.9em;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
|
||||
color: var(--MI_THEME-panelHeaderFg);
|
||||
background: var(--MI_THEME-panelHeaderBg);
|
||||
box-shadow: 0 1px 0 0 var(--MI_THEME-panelHeaderDivider);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -387,7 +387,7 @@ function onDrop(ev) {
|
|||
left: 12px;
|
||||
width: 3px;
|
||||
height: calc(100% - 24px);
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
border-radius: var(--radius-ellipse);
|
||||
}
|
||||
|
||||
|
|
@ -441,11 +441,11 @@ function onDrop(ev) {
|
|||
overscroll-behavior-y: contain;
|
||||
box-sizing: border-box;
|
||||
container-type: size;
|
||||
background-color: var(--bg);
|
||||
scrollbar-color: var(--scrollbarHandle) var(--panel);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) var(--MI_THEME-panel);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ const menu = [{
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--margin: 8px;
|
||||
--panelBorder: none;
|
||||
--MI-margin: 8px;
|
||||
--MI_THEME-panelBorder: none;
|
||||
|
||||
padding: 0 var(--margin);
|
||||
padding: 0 var(--MI-margin);
|
||||
}
|
||||
|
||||
.intro {
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
|
||||
|
||||
<div v-if="isMobile" ref="navFooter" :class="$style.nav">
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
|
||||
<button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
|
||||
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
|
||||
<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
|
||||
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
|
||||
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
|
@ -96,9 +96,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
|
@ -108,10 +110,8 @@ import { $i } from '@/account.js';
|
|||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { deviceKind } from '@/scripts/device-kind.js';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
|
||||
import { useScrollPositionManager } from '@/nirax.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
|
||||
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
||||
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
|
||||
|
|
@ -225,12 +225,12 @@ provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
|
|||
watch(navFooter, () => {
|
||||
if (navFooter.value) {
|
||||
navFooterHeight.value = navFooter.value.offsetHeight;
|
||||
document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
|
||||
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
|
||||
document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
|
||||
document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
||||
} else {
|
||||
navFooterHeight.value = 0;
|
||||
document.body.style.setProperty('--stickyBottom', '0px');
|
||||
document.body.style.setProperty('--minBottomSpacing', '0px');
|
||||
document.body.style.setProperty('--MI-stickyBottom', '0px');
|
||||
document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
|
|
@ -318,7 +318,7 @@ $widgets-hide-threshold: 1090px;
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.contents {
|
||||
|
|
@ -328,7 +328,7 @@ $widgets-hide-threshold: 1090px;
|
|||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: unset;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
.widgets {
|
||||
|
|
@ -336,9 +336,9 @@ $widgets-hide-threshold: 1090px;
|
|||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
border-left: solid 0.5px var(--divider);
|
||||
background: var(--bg);
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
border-left: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-bg);
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
|
|
@ -356,7 +356,7 @@ $widgets-hide-threshold: 1090px;
|
|||
border-radius: var(--radius-full);
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
||||
font-size: 22px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.widgetsDrawerBg {
|
||||
|
|
@ -370,11 +370,11 @@ $widgets-hide-threshold: 1090px;
|
|||
z-index: 1001;
|
||||
width: 310px;
|
||||
height: 100dvh;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
.widgetsCloseButton {
|
||||
|
|
@ -400,10 +400,10 @@ $widgets-hide-threshold: 1090px;
|
|||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(24px));
|
||||
backdrop-filter: var(--blur, blur(24px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(24px));
|
||||
backdrop-filter: var(--MI-blur, blur(24px));
|
||||
background-color: var(--MI_THEME-header);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
|
|
@ -415,32 +415,32 @@ $widgets-hide-threshold: 1090px;
|
|||
margin: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--panelHighlight);
|
||||
color: var(--accent);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: hsl(from var(--panel) h s calc(l - 2));
|
||||
color: var(--accent);
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
color: var(--MI_THEME-accent);
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
color: var(--fgOnAccent);
|
||||
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)));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5)), hsl(from var(--accent) h s calc(l + 5)));
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
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)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -453,9 +453,8 @@ $widgets-hide-threshold: 1090px;
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
&:has(.itemIndicateValueIcon) {
|
||||
animation: none;
|
||||
|
|
@ -478,7 +477,7 @@ $widgets-hide-threshold: 1090px;
|
|||
contain: strict;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.statusbars {
|
||||
|
|
@ -488,6 +487,6 @@ $widgets-hide-threshold: 1090px;
|
|||
}
|
||||
|
||||
.spacer {
|
||||
height: calc(var(--minBottomSpacing));
|
||||
height: calc(var(--MI-minBottomSpacing));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ defineExpose({
|
|||
left: 0;
|
||||
width: 500px;
|
||||
height: 100vh;
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
z-index: 1;
|
||||
|
||||
> .banner {
|
||||
|
|
@ -218,7 +218,7 @@ defineExpose({
|
|||
min-width: 0;
|
||||
|
||||
> .header {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -255,7 +255,7 @@ defineExpose({
|
|||
left: 0;
|
||||
width: 240px;
|
||||
height: 100vh;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
|
|
@ -269,7 +269,7 @@ defineExpose({
|
|||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .action {
|
||||
|
|
@ -284,7 +284,7 @@ defineExpose({
|
|||
border-radius: var(--radius-ellipse);
|
||||
|
||||
&._button {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -63,12 +63,12 @@ document.documentElement.style.overflowY = 'scroll';
|
|||
}
|
||||
|
||||
.rootWithBottom {
|
||||
min-height: calc(100dvh - (60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px)));
|
||||
min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: calc(60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px));
|
||||
height: calc(60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px));
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -81,9 +81,9 @@ document.documentElement.style.overflowY = 'scroll';
|
|||
max-width: 60px;
|
||||
margin: auto;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
right: var(--margin);
|
||||
bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
right: var(--MI-margin);
|
||||
bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue