mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2025-04-22 16:53:20 +09:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

refactor(frontend): refactor styles
Some checks are pending
Check SPDX-License-Identifier / check-spdx-license-id (push) Waiting to run
Details
Check copyright year / check_copyright_year (push) Waiting to run
Details
Publish Docker image (develop) / Build (linux/amd64) (push) Waiting to run
Details
Publish Docker image (develop) / Build (linux/arm64) (push) Waiting to run
Details
Publish Docker image (develop) / merge (push) Blocked by required conditions
Details
Dockle / dockle (push) Waiting to run
Details
Lint / lint (misskey-reversi) (push) Blocked by required conditions
Details
Lint / lint (sw) (push) Blocked by required conditions
Details
Lint / typecheck (backend) (push) Blocked by required conditions
Details
Lint / typecheck (misskey-js) (push) Blocked by required conditions
Details
Lint / typecheck (sw) (push) Blocked by required conditions
Details
Lint / pnpm_install (push) Waiting to run
Details
Lint / lint (backend) (push) Blocked by required conditions
Details
Lint / lint (frontend) (push) Blocked by required conditions
Details
Lint / lint (frontend-embed) (push) Blocked by required conditions
Details
Lint / lint (frontend-shared) (push) Blocked by required conditions
Details
Lint / lint (misskey-bubble-game) (push) Blocked by required conditions
Details
Storybook / build (push) Waiting to run
Details
Test (frontend) / Unit tests (frontend) (22.11.0) (push) Waiting to run
Details
Lint / lint (misskey-js) (push) Blocked by required conditions
Details
Test (frontend) / E2E tests (frontend) (chrome, 22.11.0) (push) Waiting to run
Details
Test (production install and build) / Production build (22.11.0) (push) Waiting to run
Details

Browse Source
This commit is contained in:
syuilo 2025-04-05 19:49:29 +09:00
parent 1626e8038b
commit f9a3db2ac3
32 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,8 +15,6 @@
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
bg: '#000', bg: '#000',
fg: '#dadada', fg: '#dadada',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
fgOnAccent: '#fff', fgOnAccent: '#fff',
fgOnWhite: '#333', fgOnWhite: '#333',

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

@ -15,8 +15,6 @@
focus: ':alpha<0.3<@accent', focus: ':alpha<0.3<@accent',
bg: '#fff', bg: '#fff',
fg: '#5f5f5f', fg: '#5f5f5f',
fgTransparentWeak: ':alpha<0.75<@fg',
fgTransparent: ':alpha<0.5<@fg',
fgHighlighted: ':darken<3<@fg', fgHighlighted: ':darken<3<@fg',
fgOnAccent: '#fff', fgOnAccent: '#fff',
fgOnWhite: '#333', fgOnWhite: '#333',

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

@ -49,7 +49,6 @@
navIndicator: '@indicator', navIndicator: '@indicator',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
buttonGradateA: '@accent', buttonGradateA: '@accent',
@ -58,7 +57,6 @@
panelHighlight: ':lighten<3<@panel', panelHighlight: ':lighten<3<@panel',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
deckBg: '#142022', deckBg: '#142022',
}, },

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

@ -51,7 +51,6 @@
buttonHoverBg: '#0000001a', buttonHoverBg: '#0000001a',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg', fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
buttonGradateA: '@accent', buttonGradateA: '@accent',
@ -60,7 +59,6 @@
panelHighlight: ':lighten<3<@panel', panelHighlight: ':lighten<3<@panel',
scrollbarHandle: '#74747433', scrollbarHandle: '#74747433',
inputBorderHover: 'rgba(255, 255, 255, 0.2)', inputBorderHover: 'rgba(255, 255, 255, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
}, },
} }

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

@ -41,14 +41,12 @@
navIndicator: '@accent', navIndicator: '@accent',
driveFolderBg: ':alpha<0.3<@accent', driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':darken<3<@fg', fgHighlighted: ':darken<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
fgOnWhite: '@accent', fgOnWhite: '@accent',
panelHeaderBg: ':lighten<3<@panel', panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg', panelHeaderFg: '@fg',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
panelHighlight: ':darken<3<@panel', panelHighlight: ':darken<3<@panel',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)', scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
fgTransparentWeak: ':alpha<0.75<@fg',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
}, },
} }

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

@ -140,7 +140,7 @@ watch(v, newValue => {
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -60,7 +60,7 @@ const onInput = () => {
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

6
packages/frontend/src/components/MkFolder.vue
View File

@ -175,7 +175,7 @@ onMounted(() => {
} }
.headerLower { .headerLower {
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
font-size: .85em; font-size: .85em;
padding-left: 4px; padding-left: 4px;
} }
@ -209,13 +209,13 @@ onMounted(() => {
} }
.headerTextSub { .headerTextSub {
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
font-size: .85em; font-size: .85em;
} }
.headerRight { .headerRight {
margin-left: auto; margin-left: auto;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
white-space: nowrap; white-space: nowrap;
} }

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

@ -201,7 +201,7 @@ defineExpose({
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -78,7 +78,7 @@ export default defineComponent({
> .caption { > .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -213,7 +213,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
> .caption { > .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -268,7 +268,7 @@ function show() {
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -100,7 +100,7 @@ const toggle = () => {
.caption { .caption {
margin: 8px 0 0 0; margin: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
font-size: 0.85em; font-size: 0.85em;
&:empty { &:empty {

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

@ -307,6 +307,6 @@ onMounted(async () => {
.description { .description {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

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

@ -160,7 +160,7 @@ onUnmounted(() => {
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

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

@ -220,7 +220,7 @@ onMounted(() => {
.statusItemLabel { .statusItemLabel {
font-size: 0.7em; font-size: 0.7em;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
.menu { .menu {

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

@ -181,7 +181,7 @@ function showMenu(ev: MouseEvent) {
} }
.statsItemLabel { .statsItemLabel {
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
font-size: 0.9em; font-size: 0.9em;
} }

2
packages/frontend/src/components/form/link.vue
View File

@ -70,7 +70,7 @@ const props = defineProps<{
margin-right: 0.75em; margin-right: 0.75em;
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

2
packages/frontend/src/components/form/section.vue
View File

@ -49,7 +49,7 @@ defineProps<{
.description { .description {
font-size: 0.85em; font-size: 0.85em;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
margin: 0 0 8px 0; margin: 0 0 8px 0;
} }
</style> </style>

2
packages/frontend/src/components/form/slot.vue
View File

@ -35,7 +35,7 @@ function focus() {
.caption { .caption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
&:empty { &:empty {
display: none; display: none;

2
packages/frontend/src/pages/admin-user.vue
View File

@ -662,7 +662,7 @@ definePage(() => ({
.roleItemSub { .roleItemSub {
padding: 6px 12px; padding: 6px 12px;
font-size: 85%; font-size: 85%;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
.roleUnassign { .roleUnassign {

2
packages/frontend/src/pages/admin/roles.role.vue
View File

@ -184,7 +184,7 @@ definePage(() => ({
.userItemSub { .userItemSub {
padding: 6px 12px; padding: 6px 12px;
font-size: 85%; font-size: 85%;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
.userItemMainBody { .userItemMainBody {

2
packages/frontend/src/pages/admin/settings.vue
View File

@ -400,6 +400,6 @@ definePage(() => ({
<style lang="scss" module> <style lang="scss" module>
.subCaption { .subCaption {
font-size: 0.85em; font-size: 0.85em;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

2
packages/frontend/src/pages/admin/system-webhook.item.vue
View File

@ -75,6 +75,6 @@ function onDeleteClick() {
margin-right: 0.75em; margin-right: 0.75em;
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

2
packages/frontend/src/pages/scratchpad.vue
View File

@ -247,7 +247,7 @@ definePage(() => ({
} }
.uiInspectorUnShown { .uiInspectorUnShown {
color: var(--MI_THEME-fgTransparent); color: color(from var(--MI_THEME-fg) srgb r g b / 0.5);
} }
.uiInspectorType { .uiInspectorType {

2
packages/frontend/src/pages/search.note.vue
View File

@ -333,7 +333,7 @@ async function search() {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 12px; padding: 12px;
border: 2px dashed var(--MI_THEME-fgTransparent); border: 2px dashed color(from var(--MI_THEME-fg) srgb r g b / 0.5);
} }
.userSelectButtonInner { .userSelectButtonInner {

2
packages/frontend/src/pages/settings/emoji-palette.palette.vue
View File

@ -161,6 +161,6 @@ function del(ev: MouseEvent) {
.editorCaption { .editorCaption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

2
packages/frontend/src/pages/settings/emoji-palette.vue
View File

@ -246,6 +246,6 @@ definePage(() => ({
.editorCaption { .editorCaption {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

2
packages/frontend/src/pages/settings/mute-block.vue
View File

@ -308,7 +308,7 @@ definePage(() => ({
.userItemSub { .userItemSub {
padding: 6px 12px; padding: 6px 12px;
font-size: 85%; font-size: 85%;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
.userItemMainBody { .userItemMainBody {

2
packages/frontend/src/pages/settings/webhook.edit.vue
View File

@ -184,6 +184,6 @@ definePage(() => ({
.description { .description {
font-size: 0.85em; font-size: 0.85em;
padding: 8px 0 0 0; padding: 8px 0 0 0;
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>

2
packages/frontend/src/pages/user/home.vue
View File

@ -520,7 +520,7 @@ onUnmounted(() => {
> .heading { > .heading {
text-align: left; text-align: left;
color: var(--MI_THEME-fgTransparent); color: color(from var(--MI_THEME-fg) srgb r g b / 0.5);
line-height: 1.5; line-height: 1.5;
font-size: 85%; font-size: 85%;
} }

2
packages/frontend/src/widgets/WidgetOnlineUsers.vue
View File

@ -73,6 +73,6 @@ defineExpose<WidgetComponentExpose>({
} }
.text { .text {
color: var(--MI_THEME-fgTransparentWeak); color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
} }
</style> </style>