mirror of
https://github.com/misskey-dev/misskey.git
synced 2025-04-18 16:13:18 +09:00
refactor(frontend): refactor styles
Some checks are pending
Check SPDX-License-Identifier / check-spdx-license-id (push) Waiting to run
Check copyright year / check_copyright_year (push) Waiting to run
Publish Docker image (develop) / Build (linux/amd64) (push) Waiting to run
Publish Docker image (develop) / Build (linux/arm64) (push) Waiting to run
Publish Docker image (develop) / merge (push) Blocked by required conditions
Dockle / dockle (push) Waiting to run
Lint / lint (misskey-reversi) (push) Blocked by required conditions
Lint / lint (sw) (push) Blocked by required conditions
Lint / typecheck (backend) (push) Blocked by required conditions
Lint / typecheck (misskey-js) (push) Blocked by required conditions
Lint / typecheck (sw) (push) Blocked by required conditions
Lint / pnpm_install (push) Waiting to run
Lint / lint (backend) (push) Blocked by required conditions
Lint / lint (frontend) (push) Blocked by required conditions
Lint / lint (frontend-embed) (push) Blocked by required conditions
Lint / lint (frontend-shared) (push) Blocked by required conditions
Lint / lint (misskey-bubble-game) (push) Blocked by required conditions
Storybook / build (push) Waiting to run
Test (frontend) / Unit tests (frontend) (22.11.0) (push) Waiting to run
Lint / lint (misskey-js) (push) Blocked by required conditions
Test (frontend) / E2E tests (frontend) (chrome, 22.11.0) (push) Waiting to run
Test (production install and build) / Production build (22.11.0) (push) Waiting to run
Some checks are pending
Check SPDX-License-Identifier / check-spdx-license-id (push) Waiting to run
Check copyright year / check_copyright_year (push) Waiting to run
Publish Docker image (develop) / Build (linux/amd64) (push) Waiting to run
Publish Docker image (develop) / Build (linux/arm64) (push) Waiting to run
Publish Docker image (develop) / merge (push) Blocked by required conditions
Dockle / dockle (push) Waiting to run
Lint / lint (misskey-reversi) (push) Blocked by required conditions
Lint / lint (sw) (push) Blocked by required conditions
Lint / typecheck (backend) (push) Blocked by required conditions
Lint / typecheck (misskey-js) (push) Blocked by required conditions
Lint / typecheck (sw) (push) Blocked by required conditions
Lint / pnpm_install (push) Waiting to run
Lint / lint (backend) (push) Blocked by required conditions
Lint / lint (frontend) (push) Blocked by required conditions
Lint / lint (frontend-embed) (push) Blocked by required conditions
Lint / lint (frontend-shared) (push) Blocked by required conditions
Lint / lint (misskey-bubble-game) (push) Blocked by required conditions
Storybook / build (push) Waiting to run
Test (frontend) / Unit tests (frontend) (22.11.0) (push) Waiting to run
Lint / lint (misskey-js) (push) Blocked by required conditions
Test (frontend) / E2E tests (frontend) (chrome, 22.11.0) (push) Waiting to run
Test (production install and build) / Production build (22.11.0) (push) Waiting to run
This commit is contained in:
parent
1626e8038b
commit
f9a3db2ac3
@ -15,8 +15,6 @@
|
||||
focus: ':alpha<0.3<@accent',
|
||||
bg: '#000',
|
||||
fg: '#dadada',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgOnAccent: '#fff',
|
||||
fgOnWhite: '#333',
|
||||
|
@ -15,8 +15,6 @@
|
||||
focus: ':alpha<0.3<@accent',
|
||||
bg: '#fff',
|
||||
fg: '#5f5f5f',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
fgHighlighted: ':darken<3<@fg',
|
||||
fgOnAccent: '#fff',
|
||||
fgOnWhite: '#333',
|
||||
|
@ -49,7 +49,6 @@
|
||||
navIndicator: '@indicator',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
buttonGradateA: '@accent',
|
||||
@ -58,7 +57,6 @@
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
scrollbarHandle: '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)',
|
||||
deckBg: '#142022',
|
||||
},
|
||||
|
@ -51,7 +51,6 @@
|
||||
buttonHoverBg: '#0000001a',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
fgHighlighted: ':lighten<3<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
buttonGradateA: '@accent',
|
||||
@ -60,7 +59,6 @@
|
||||
panelHighlight: ':lighten<3<@panel',
|
||||
scrollbarHandle: '#74747433',
|
||||
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
},
|
||||
}
|
||||
|
@ -41,14 +41,12 @@
|
||||
navIndicator: '@accent',
|
||||
driveFolderBg: ':alpha<0.3<@accent',
|
||||
fgHighlighted: ':darken<3<@fg',
|
||||
fgTransparent: ':alpha<0.5<@fg',
|
||||
fgOnWhite: '@accent',
|
||||
panelHeaderBg: ':lighten<3<@panel',
|
||||
panelHeaderFg: '@fg',
|
||||
htmlThemeColor: '@bg',
|
||||
panelHighlight: ':darken<3<@panel',
|
||||
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
|
||||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
|
||||
},
|
||||
}
|
||||
|
@ -140,7 +140,7 @@ watch(v, newValue => {
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -60,7 +60,7 @@ const onInput = () => {
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -175,7 +175,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.headerLower {
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
font-size: .85em;
|
||||
padding-left: 4px;
|
||||
}
|
||||
@ -209,13 +209,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.headerTextSub {
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
@ -201,7 +201,7 @@ defineExpose({
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -78,7 +78,7 @@ export default defineComponent({
|
||||
> .caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -213,7 +213,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
|
||||
> .caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -268,7 +268,7 @@ function show() {
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -100,7 +100,7 @@ const toggle = () => {
|
||||
|
||||
.caption {
|
||||
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;
|
||||
|
||||
&:empty {
|
||||
|
@ -307,6 +307,6 @@ onMounted(async () => {
|
||||
.description {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -160,7 +160,7 @@ onUnmounted(() => {
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -220,7 +220,7 @@ onMounted(() => {
|
||||
|
||||
.statusItemLabel {
|
||||
font-size: 0.7em;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
@ -181,7 +181,7 @@ function showMenu(ev: MouseEvent) {
|
||||
}
|
||||
|
||||
.statsItemLabel {
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
@ -70,7 +70,7 @@ const props = defineProps<{
|
||||
margin-right: 0.75em;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -49,7 +49,7 @@ defineProps<{
|
||||
|
||||
.description {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
@ -35,7 +35,7 @@ function focus() {
|
||||
.caption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
@ -662,7 +662,7 @@ definePage(() => ({
|
||||
.roleItemSub {
|
||||
padding: 6px 12px;
|
||||
font-size: 85%;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
|
||||
.roleUnassign {
|
||||
|
@ -184,7 +184,7 @@ definePage(() => ({
|
||||
.userItemSub {
|
||||
padding: 6px 12px;
|
||||
font-size: 85%;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
|
||||
.userItemMainBody {
|
||||
|
@ -400,6 +400,6 @@ definePage(() => ({
|
||||
<style lang="scss" module>
|
||||
.subCaption {
|
||||
font-size: 0.85em;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -75,6 +75,6 @@ function onDeleteClick() {
|
||||
margin-right: 0.75em;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -247,7 +247,7 @@ definePage(() => ({
|
||||
}
|
||||
|
||||
.uiInspectorUnShown {
|
||||
color: var(--MI_THEME-fgTransparent);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.5);
|
||||
}
|
||||
|
||||
.uiInspectorType {
|
||||
|
@ -333,7 +333,7 @@ async function search() {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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 {
|
||||
|
@ -161,6 +161,6 @@ function del(ev: MouseEvent) {
|
||||
.editorCaption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -246,6 +246,6 @@ definePage(() => ({
|
||||
.editorCaption {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -308,7 +308,7 @@ definePage(() => ({
|
||||
.userItemSub {
|
||||
padding: 6px 12px;
|
||||
font-size: 85%;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
|
||||
.userItemMainBody {
|
||||
|
@ -184,6 +184,6 @@ definePage(() => ({
|
||||
.description {
|
||||
font-size: 0.85em;
|
||||
padding: 8px 0 0 0;
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
@ -520,7 +520,7 @@ onUnmounted(() => {
|
||||
|
||||
> .heading {
|
||||
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;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
@ -73,6 +73,6 @@ defineExpose<WidgetComponentExpose>({
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--MI_THEME-fgTransparentWeak);
|
||||
color: color(from var(--MI_THEME-fg) srgb r g b / 0.75);
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user