sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): prefix css variables (#14725)

Browse Source 
* wip

* Update index.d.ts

* remove unnecessary codes
This commit is contained in:
syuilo
2024-10-09 18:08:14 +09:00
committed by GitHub
parent 0ad31bd5d4
commit 4a356f1ba7
280 changed files with 1076 additions and 1093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/ui/_common_/announcements.vue
View File

@@ -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;

4
packages/frontend/src/ui/_common_/common.vue
View File

@@ -234,8 +234,8 @@ if ($i) {
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;
}

20
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View File

@@ -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;
@@ -137,7 +137,7 @@ function more() {
display: block;
width: 100%;
height: 40px;
color: var(--fgOnAccent);
color: var(--MI_THEME-fgOnAccent);
font-weight: bold;
text-align: left;
@@ -153,12 +153,12 @@ function more() {
right: 0;
bottom: 0;
border-radius: 999px;
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);
}
}
}
@@ -202,7 +202,7 @@ function more() {
.divider {
margin: 16px 16px;
border-top: solid 0.5px var(--divider);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.item {
@@ -216,15 +216,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 {
@@ -240,7 +240,7 @@ function more() {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}
}
@@ -255,7 +255,7 @@ function more() {
position: absolute;
top: 0;
left: 20px;
color: var(--navIndicator);
color: var(--MI_THEME-navIndicator);
font-size: 8px;
animation: global-blink 1s infinite;

54
packages/frontend/src/ui/_common_/navbar.vue
View File

@@ -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;
@@ -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;
}
}
@@ -198,7 +198,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;
@@ -214,21 +214,21 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
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);
}
}
}
@@ -258,7 +258,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);
}
}
}
@@ -284,7 +284,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 {
@@ -298,28 +298,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: "";
@@ -333,7 +333,7 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
}
}
@@ -348,7 +348,7 @@ 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;
@@ -393,7 +393,7 @@ function more(ev: MouseEvent) {
outline: none;
> .instanceIcon {
outline: 2px solid var(--focus);
outline: 2px solid var(--MI_THEME-focus);
outline-offset: 2px;
}
}
@@ -433,28 +433,28 @@ function more(ev: MouseEvent) {
width: 52px;
aspect-ratio: 1/1;
border-radius: 100%;
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 {
@@ -472,7 +472,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);
}
}
}
@@ -494,7 +494,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 {
@@ -508,14 +508,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: "";
@@ -529,7 +529,7 @@ function more(ev: MouseEvent) {
right: 0;
bottom: 0;
border-radius: 999px;
background: var(--accentedBg);
background: var(--MI_THEME-accentedBg);
}
> .icon,
@@ -553,7 +553,7 @@ 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;

4
packages/frontend/src/ui/_common_/statusbars.vue
View File

@@ -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;

4
packages/frontend/src/ui/_common_/upload.vue
View File

@@ -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>

10
packages/frontend/src/ui/classic.header.vue
View File

@@ -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,18 @@ 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 +159,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 {

10
packages/frontend/src/ui/classic.sidebar.vue
View File

@@ -157,7 +157,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 {
@@ -165,7 +165,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
top: 0;
z-index: 1;
padding: 16px 0;
background: var(--bg);
background: var(--MI_THEME-bg);
> .button {
min-width: 0;
@@ -220,7 +220,7 @@ 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;
@@ -233,11 +233,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);
}
}
}

14
packages/frontend/src/ui/classic.vue
View File

@@ -216,7 +216,7 @@ onMounted(() => {
box-sizing: border-box;
&.wallpaper {
background: var(--wallpaperOverlay);
background: var(--MI_THEME-wallpaperOverlay);
//backdrop-filter: var(--blur, blur(4px));
}
@@ -249,15 +249,15 @@ 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;
}
> .widgets {
//--panelBorder: none;
//--MI_THEME-panelBorder: none;
width: 300px;
padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
@@ -277,7 +277,7 @@ onMounted(() => {
&.withGlobalHeader {
> .main {
margin-top: 0;
border: solid 1px var(--divider);
border: solid 1px var(--MI_THEME-divider);
border-radius: var(--radius);
--stickyTop: var(--globalHeaderHeight);
}
@@ -292,7 +292,7 @@ onMounted(() => {
margin: 0;
> .sidebar {
border-right: solid 0.5px var(--divider);
border-right: solid 0.5px var(--MI_THEME-divider);
}
> .main {
@@ -317,7 +317,7 @@ onMounted(() => {
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
overflow: auto;
background: var(--bg);
background: var(--MI_THEME-bg);
}
> .ivnzpscs {

26
packages/frontend/src/ui/deck.vue
View File

@@ -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 {
@@ -430,8 +430,8 @@ body {
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);
background-color: var(--MI_THEME-header);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.navButton {
@@ -442,29 +442,29 @@ body {
max-width: 60px;
margin: auto;
border-radius: 100%;
background: var(--panel);
color: var(--fg);
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
&:hover {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
&:active {
background: hsl(from var(--panel) h s calc(l - 2));
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)));
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)));
}
&: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)));
}
}
@@ -477,7 +477,7 @@ body {
position: absolute;
top: 0;
left: 0;
color: var(--indicator);
color: var(--MI_THEME-indicator);
font-size: 16px;
animation: global-blink 1s infinite;

32
packages/frontend/src/ui/deck/column.vue
View File

@@ -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;
background: var(--MI_THEME-acrylicBg) !important;
-webkit-backdrop-filter: var(--blur, blur(10px));
backdrop-filter: var(--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: 999px;
}
@@ -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>

2
packages/frontend/src/ui/deck/widgets-column.vue
View File

@@ -58,7 +58,7 @@ const menu = [{
<style lang="scss" module>
.root {
--margin: 8px;
--panelBorder: none;
--MI_THEME-panelBorder: none;
padding: 0 var(--margin);
}

36
packages/frontend/src/ui/universal.vue
View File

@@ -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: contain;
background: var(--bg);
background: var(--MI_THEME-bg);
}
.widgets {
@@ -337,8 +337,8 @@ $widgets-hide-threshold: 1090px;
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);
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: 100%;
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 {
@@ -374,7 +374,7 @@ $widgets-hide-threshold: 1090px;
box-sizing: border-box;
overflow: auto;
overscroll-behavior: contain;
background: var(--bg);
background: var(--MI_THEME-bg);
}
.widgetsCloseButton {
@@ -402,8 +402,8 @@ $widgets-hide-threshold: 1090px;
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);
background-color: var(--MI_THEME-header);
border-top: solid 0.5px var(--MI_THEME-divider);
}
.navButton {
@@ -414,29 +414,29 @@ $widgets-hide-threshold: 1090px;
max-width: 60px;
margin: auto;
border-radius: 100%;
background: var(--panel);
color: var(--fg);
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
&:hover {
background: var(--panelHighlight);
background: var(--MI_THEME-panelHighlight);
}
&:active {
background: hsl(from var(--panel) h s calc(l - 2));
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)));
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)));
}
&: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)));
}
}
@@ -449,7 +449,7 @@ $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;
@@ -474,7 +474,7 @@ $widgets-hide-threshold: 1090px;
contain: strict;
overflow: auto;
overscroll-behavior: contain;
background: var(--navBg);
background: var(--MI_THEME-navBg);
}
.statusbars {

12
packages/frontend/src/ui/visitor.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div class="mk-app">
<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--MI_THEME-panel); color:var(--MI_THEME-fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div v-if="!narrow && !isRoot" class="side">
<div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
@@ -191,7 +191,7 @@ defineExpose({
left: 0;
width: 500px;
height: 100vh;
background: var(--accent);
background: var(--MI_THEME-accent);
> .banner {
position: absolute;
@@ -219,7 +219,7 @@ defineExpose({
min-width: 0;
> .header {
background: var(--panel);
background: var(--MI_THEME-panel);
> .wide {
line-height: 50px;
@@ -254,7 +254,7 @@ defineExpose({
left: 0;
width: 240px;
height: 100vh;
background: var(--panel);
background: var(--MI_THEME-panel);
> .link {
display: block;
@@ -268,7 +268,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 {
@@ -283,7 +283,7 @@ defineExpose({
border-radius: 999px;
&._button {
background: var(--panel);
background: var(--MI_THEME-panel);
}
&:first-child {

4
packages/frontend/src/ui/zen.vue
View File

@@ -81,8 +81,8 @@ document.documentElement.style.overflowY = 'scroll';
max-width: 60px;
margin: auto;
border-radius: 100%;
background: var(--panel);
color: var(--fg);
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
right: var(--margin);
bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
}