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

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;