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

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

@@ -17,8 +17,8 @@
html {
background-color: transparent;
color-scheme: light dark;
color: var(--fg);
accent-color: var(--accent);
color: var(--MI_THEME-fg);
accent-color: var(--MI_THEME-accent);
overflow: clip;
overflow-wrap: break-word;
font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
@@ -29,7 +29,7 @@ html {
-webkit-text-size-adjust: 100%;
&, * {
scrollbar-color: var(--scrollbarHandle) transparent;
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
scrollbar-width: thin;
&::-webkit-scrollbar {
@@ -42,14 +42,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);
}
}
}
@@ -93,7 +93,7 @@ rt {
}
:focus-visible {
outline: var(--focus) solid 2px;
outline: var(--MI_THEME-focus) solid 2px;
outline-offset: -2px;
&:hover {
@@ -151,38 +151,38 @@ rt {
._buttonGray {
@extend ._button;
background: var(--buttonBg);
background: var(--MI_THEME-buttonBg);
&:not(:disabled):hover {
background: var(--buttonHoverBg);
background: var(--MI_THEME-buttonHoverBg);
}
}
._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)));
}
}
@@ -199,13 +199,13 @@ rt {
}
._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;
@@ -217,7 +217,7 @@ rt {
}
._panel {
background: var(--panel);
background: var(--MI_THEME-panel);
border-radius: var(--radius);
overflow: clip;
}
@@ -263,22 +263,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));
}
@@ -296,7 +296,7 @@ rt {
}
._link {
color: var(--link);
color: var(--MI_THEME-link);
}
._caption {