usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🎨

This commit is contained in:
syuilo 2025-03-31 13:00:34 +09:00
parent 49f1f7194d
commit ea722b8360
21 changed files with 27 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend-embed/src/components/EmMediaImage.vue
View File

@ -95,7 +95,7 @@ async function onclick(ev: MouseEvent) {
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
background-color: var(--MI_THEME-fg); background-color: var(--MI_THEME-fg);
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
font-size: 12px; font-size: 12px;
opacity: .5; opacity: .5;
padding: 5px 8px; padding: 5px 8px;
@ -153,7 +153,7 @@ html[data-color-scheme=light] .visible {
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
background-color: black; background-color: black;
border-radius: 6px; border-radius: 6px;
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;

2
packages/frontend-embed/src/style.scss
View File

@ -278,7 +278,7 @@ rt {
} }
._acrylic { ._acrylic {
background: var(--MI_THEME-acrylicPanel); background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }

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

@ -10,8 +10,6 @@
props: { props: {
accent: '#86b300', accent: '#86b300',
accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent', accentedBg: ':alpha<0.15<@accent',
love: '#dd2e44', love: '#dd2e44',
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
@ -31,7 +29,6 @@
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel', windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel', popup: ':lighten<3<@panel',
shadow: 'rgba(0, 0, 0, 0.3)', shadow: 'rgba(0, 0, 0, 0.3)',

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

@ -10,8 +10,6 @@
props: { props: {
accent: '#86b300', accent: '#86b300',
accentDarken: ':darken<10<@accent',
accentLighten: ':lighten<10<@accent',
accentedBg: ':alpha<0.15<@accent', accentedBg: ':alpha<0.15<@accent',
love: '#dd2e44', love: '#dd2e44',
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
@ -31,7 +29,6 @@
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel', windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel', popup: ':lighten<3<@panel',
shadow: 'rgba(0, 0, 0, 0.1)', shadow: 'rgba(0, 0, 0, 0.1)',

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

@ -37,10 +37,7 @@
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent', navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
buttonGradateA: '@accent', buttonGradateA: '@accent',
buttonGradateB: ':hue<-20<@accent', buttonGradateB: ':hue<-20<@accent',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',

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

@ -48,10 +48,7 @@
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator', navIndicator: '@indicator',
accentLighten: ':lighten<10<@accent',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg', fgTransparent: ':alpha<0.5<@fg',

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

@ -49,10 +49,7 @@
dateLabelFg: '@fg', dateLabelFg: '@fg',
inputBorder: 'rgba(255, 255, 255, 0.1)', inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator', navIndicator: '@indicator',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: '#0000001a', buttonHoverBg: '#0000001a',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',

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

@ -40,10 +40,7 @@
inputBorder: 'rgba(0, 0, 0, 0.1)', inputBorder: 'rgba(0, 0, 0, 0.1)',
inputBorderHover: 'rgba(0, 0, 0, 0.2)', inputBorderHover: 'rgba(0, 0, 0, 0.2)',
panelBorder: '" solid 1px var(--MI_THEME-divider)', panelBorder: '" solid 1px var(--MI_THEME-divider)',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@accent', navIndicator: '@accent',
accentLighten: ':lighten<10<@accent',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':darken<3<@fg', fgHighlighted: ':darken<3<@fg',
fgTransparent: ':alpha<0.5<@fg', fgTransparent: ':alpha<0.5<@fg',

2
packages/frontend/src/components/MkAutocomplete.vue
View File

@ -420,7 +420,7 @@ onBeforeUnmount(() => {
} }
&:active { &:active {
background: var(--MI_THEME-accentDarken); background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
color: #fff !important; color: #fff !important;
} }
} }

8
packages/frontend/src/components/MkChannelFollowButton.vue
View File

@ -103,13 +103,13 @@ async function onClick() {
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
&:hover { &:hover {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
border-color: var(--MI_THEME-accentLighten); border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
&:active { &:active {
background: var(--MI_THEME-accentDarken); background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
border-color: var(--MI_THEME-accentDarken); border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
} }
} }

4
packages/frontend/src/components/MkDrive.file.vue
View File

@ -151,11 +151,11 @@ function onDragend() {
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
&:hover { &:hover {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
&:active { &:active {
background: var(--MI_THEME-accentDarken); background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
} }
> .label { > .label {

8
packages/frontend/src/components/MkFollowButton.vue
View File

@ -211,13 +211,13 @@ onBeforeUnmount(() => {
background: var(--MI_THEME-accent); background: var(--MI_THEME-accent);
&:hover { &:hover {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
border-color: var(--MI_THEME-accentLighten); border-color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
&:active { &:active {
background: var(--MI_THEME-accentDarken); background: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
border-color: var(--MI_THEME-accentDarken); border-color: hsl(from var(--MI_THEME-accent) h s calc(l - 10));
} }
} }

4
packages/frontend/src/components/MkMediaImage.vue
View File

@ -220,7 +220,7 @@ function showMenu(ev: MouseEvent) {
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
background-color: var(--MI_THEME-fg); background-color: var(--MI_THEME-fg);
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
font-size: 12px; font-size: 12px;
opacity: .5; opacity: .5;
padding: 5px 8px; padding: 5px 8px;
@ -294,7 +294,7 @@ html[data-color-scheme=light] .visible {
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
background-color: black; background-color: black;
border-radius: 6px; border-radius: 6px;
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;

4
packages/frontend/src/components/MkMediaVideo.vue
View File

@ -553,7 +553,7 @@ onDeactivated(() => {
/* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */ /* Hardcode to black because either --MI_THEME-bg or --MI_THEME-fg makes it hard to read in dark/light mode */
background-color: black; background-color: black;
border-radius: 6px; border-radius: 6px;
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
font-size: 0.8em; font-size: 0.8em;
@ -565,7 +565,7 @@ onDeactivated(() => {
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
background-color: var(--MI_THEME-fg); background-color: var(--MI_THEME-fg);
color: var(--MI_THEME-accentLighten); color: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
font-size: 12px; font-size: 12px;
opacity: .5; opacity: .5;
padding: 5px 8px; padding: 5px 8px;

2
packages/frontend/src/components/MkRange.vue
View File

@ -287,7 +287,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
border-radius: 999px; border-radius: 999px;
&:hover { &:hover {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
} }
} }

2
packages/frontend/src/components/grid/MkDataCell.vue
View File

@ -345,7 +345,7 @@ $cellHeight: 28px;
border: solid 0.5px transparent; border: solid 0.5px transparent;
&.selected { &.selected {
border: solid 0.5px var(--MI_THEME-accentLighten); border: solid 0.5px hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
&.ranged { &.ranged {

2
packages/frontend/src/pages/welcome.entrance.a.vue
View File

@ -151,7 +151,7 @@ misskeyApiGet('federation/instances', {
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
background: var(--MI_THEME-acrylicPanel); background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
border-radius: 999px; border-radius: 999px;

2
packages/frontend/src/style.scss
View File

@ -398,7 +398,7 @@ rt {
} }
._acrylic { ._acrylic {
background: var(--MI_THEME-acrylicPanel); background: color(from var(--MI_THEME-panel) srgb r g b / 0.5);
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));
} }

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

@ -159,7 +159,7 @@ function more() {
&:hover, &.active { &:hover, &.active {
&::before { &::before {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
} }
} }

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

@ -382,7 +382,7 @@ function menuEdit() {
&:hover, &.active { &:hover, &.active {
&::before { &::before {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
} }
} }
@ -612,7 +612,7 @@ function menuEdit() {
&:hover, &.active { &:hover, &.active {
&::before { &::before {
background: var(--MI_THEME-accentLighten); background: hsl(from var(--MI_THEME-accent) h s calc(l + 10));
} }
} }
} }

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

@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.sideMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button> <button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.sideMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
</div> </div>
<div :class="$style.sideMenuBottom"> <div :class="$style.sideMenuBottom">
<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings"></i></button> <button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.sideMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
</div> </div>
</div> </div>
</div> </div>
@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.bottomMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button> <button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" :class="$style.bottomMenuButton" class="_button" @click="addColumn"><i class="ti ti-plus"></i></button>
</div> </div>
<div :class="$style.bottomMenuRight"> <div :class="$style.bottomMenuRight">
<button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.bottomMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings"></i></button> <button v-tooltip.noDelay.left="i18n.ts.settings" :class="$style.bottomMenuButton" class="_button" @click="showSettings"><i class="ti ti-settings-2"></i></button>
</div> </div>
</div> </div>