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

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

@@ -25,14 +25,14 @@
}
::selection {
color: var(--fgOnAccent);
background-color: var(--accent);
color: var(--MI_THEME-fgOnAccent);
background-color: var(--MI_THEME-accent);
}
html {
background-color: var(--bg);
color: var(--fg);
accent-color: var(--accent);
background-color: var(--MI_THEME-bg);
color: var(--MI_THEME-fg);
accent-color: var(--MI_THEME-accent);
overflow: auto;
overflow-wrap: break-word;
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
@@ -43,7 +43,7 @@ html {
-webkit-text-size-adjust: 100%;
&, * {
scrollbar-color: var(--scrollbarHandle) transparent;
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
scrollbar-width: thin;
&::-webkit-scrollbar {
@@ -56,14 +56,14 @@ html {
}
&::-webkit-scrollbar-thumb {
background: var(--scrollbarHandle);
background: var(--MI_THEME-scrollbarHandle);
&:hover {
background: var(--scrollbarHandleHover);
background: var(--MI_THEME-scrollbarHandleHover);
}
&:active {
background: var(--accent);
background: var(--MI_THEME-accent);
}
}
}
@@ -125,15 +125,15 @@ textarea, input {
}
optgroup, option {
background: var(--panel);
color: var(--fg);
background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg);
}
hr {
margin: var(--margin) 0 var(--margin) 0;
border: none;
height: 1px;
background: var(--divider);
background: var(--MI_THEME-divider);
}
rt {
@@ -141,7 +141,7 @@ rt {
}
:focus-visible {
outline: var(--focus) solid 2px;
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
&:hover {
@@ -174,9 +174,9 @@ rt {
._indicateCounter {
display: inline-flex;
color: var(--fgOnAccent);
color: var(--MI_THEME-fgOnAccent);
font-weight: 700;
background: var(--indicator);
background: var(--MI_THEME-indicator);
height: 1.5em;
min-width: 1.5em;
align-items: center;
@@ -209,13 +209,13 @@ rt {
left: 0;
width: 100%;
height: 100%;
background: var(--modalBg);
background: var(--MI_THEME-modalBg);
-webkit-backdrop-filter: var(--modalBgFilter);
backdrop-filter: var(--modalBgFilter);
}
._shadow {
box-shadow: 0px 4px 32px var(--shadow) !important;
box-shadow: 0px 4px 32px var(--MI_THEME-shadow) !important;
}
._button {
@@ -244,40 +244,40 @@ rt {
._buttonPrimary {
@extend ._button;
color: var(--fgOnAccent);
background: var(--accent);
color: var(--MI_THEME-fgOnAccent);
background: var(--MI_THEME-accent);
&:not(:disabled):hover {
background: hsl(from var(--accent) h s calc(l + 5));
background: hsl(from var(--MI_THEME-accent) h s calc(l + 5));
}
&:not(:disabled):active {
background: hsl(from var(--accent) h s calc(l - 5));
background: hsl(from var(--MI_THEME-accent) h s calc(l - 5));
}
}
._buttonGradate {
@extend ._buttonPrimary;
color: var(--fgOnAccent);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
color: var(--MI_THEME-fgOnAccent);
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
&:not(:disabled):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)));
}
&:not(:disabled):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)));
}
}
._help {
color: var(--accent);
color: var(--MI_THEME-accent);
cursor: help;
}
._textButton {
@extend ._button;
color: var(--accent);
color: var(--MI_THEME-accent);
&:focus-visible {
outline-offset: 2px;
@@ -289,7 +289,7 @@ rt {
}
._panel {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
overflow: clip;
}
@@ -335,22 +335,22 @@ rt {
padding: 10px;
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--divider);
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
&:active {
border-color: var(--accent);
border-color: var(--MI_THEME-accent);
}
}
._popup {
background: var(--popup);
background: var(--MI_THEME-popup);
border-radius: var(--radius);
contain: content;
}
._acrylic {
background: var(--acrylicPanel);
background: var(--MI_THEME-acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
}
@@ -365,8 +365,8 @@ rt {
margin-left: 0.7em;
font-size: 65%;
padding: 2px 3px;
color: var(--accent);
border: solid 1px var(--accent);
color: var(--MI_THEME-accent);
border: solid 1px var(--MI_THEME-accent);
border-radius: 4px;
vertical-align: top;
}
@@ -375,8 +375,8 @@ rt {
margin-left: 0.7em;
font-size: 65%;
padding: 2px 3px;
color: var(--warn);
border: solid 1px var(--warn);
color: var(--MI_THEME-warn);
border: solid 1px var(--MI_THEME-warn);
border-radius: 4px;
vertical-align: top;
}
@@ -422,7 +422,7 @@ rt {
}
._link {
color: var(--link);
color: var(--MI_THEME-link);
}
._caption {
@@ -446,14 +446,14 @@ rt {
box-shadow: 0 6px 16px #0007, 0 0 1px 1px #693410, inset 0 0 2px 1px #ce8a5c;
border-radius: 10px;
--bg: #F1E8DC;
--fg: #693410;
--MI_THEME-bg: #F1E8DC;
--MI_THEME-fg: #693410;
}
html[data-color-scheme=dark] ._woodenFrame {
--bg: #1d0c02;
--fg: #F1E8DC;
--panel: #192320;
--MI_THEME-bg: #1d0c02;
--MI_THEME-fg: #F1E8DC;
--MI_THEME-panel: #192320;
}
._woodenFrameH {
@@ -464,10 +464,10 @@ html[data-color-scheme=dark] ._woodenFrame {
._woodenFrameInner {
padding: 8px;
margin-top: 8px;
background: var(--bg);
background: var(--MI_THEME-bg);
box-shadow: 0 0 2px 1px #ce8a5c, inset 0 0 1px 1px #693410;
border-radius: 6px;
color: var(--fg);
color: var(--MI_THEME-fg);
&:first-child {
margin-top: 0;