sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): prefix css variables (UI) (#14739)

Browse Source 
* refactor(frontend): prefix css variables

* `MI_UI` -> `MI`

* fix

* `stickyBottom`

* stickyTop
This commit is contained in:
かっこかり
2024-10-10 16:12:16 +09:00
committed by GitHub
parent 21e51567e7
commit b668d161a9
130 changed files with 296 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend-embed/src/components/EmMediaBanner.vue
View File

@@ -31,10 +31,10 @@ defineProps<{
display: flex;
align-items: center;
width: 100%;
padding: var(--margin);
padding: var(--MI-margin);
margin-top: 4px;
border: 1px solid var(--MI_THEME-inputBorder);
border-radius: var(--radius);
border-radius: var(--MI-radius);
background-color: var(--MI_THEME-panel);
transition: background-color .1s, border-color .1s;

4
packages/frontend-embed/src/components/EmMediaVideo.vue
View File

@@ -29,9 +29,9 @@ defineProps<{
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
padding: var(--margin);
padding: var(--MI-margin);
border: 1px solid var(--MI_THEME-divider);
border-radius: var(--radius);
border-radius: var(--MI-radius);
background-color: #000;
&:hover {

10
packages/frontend-embed/src/components/EmNote.vue
View File

@@ -190,7 +190,7 @@ const isDeleted = ref(false);
width: calc(100% - 8px);
height: calc(100% - 8px);
border: dashed 2px var(--MI_THEME-focus);
border-radius: var(--radius);
border-radius: var(--MI-radius);
box-sizing: border-box;
}
}
@@ -356,7 +356,7 @@ const isDeleted = ref(false);
width: 58px;
height: 58px;
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
top: calc(22px + var(--MI-stickyTop, 0px));
left: 0;
}
@@ -377,7 +377,7 @@ const isDeleted = ref(false);
width: 100%;
margin-top: 14px;
position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px);
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {
@@ -430,7 +430,7 @@ const isDeleted = ref(false);
.translation {
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
border-radius: var(--MI-radius);
padding: 12px;
margin-top: 8px;
}
@@ -550,7 +550,7 @@ const isDeleted = ref(false);
margin: 0 10px 0 0;
width: 46px;
height: 46px;
top: calc(14px + var(--stickyTop, 0px));
top: calc(14px + var(--MI-stickyTop, 0px));
}
}

2
packages/frontend-embed/src/components/EmNoteDetailed.vue
View File

@@ -364,7 +364,7 @@ const collapsed = ref(appearNote.value.cw == null && isLong);
width: 100%;
margin-top: 14px;
position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px);
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {

2
packages/frontend-embed/src/components/EmNoteSimple.vue
View File

@@ -53,7 +53,7 @@ const showContent = ref(false);
height: 34px;
border-radius: 8px;
position: sticky !important;
top: calc(16px + var(--stickyTop, 0px));
top: calc(16px + var(--MI-stickyTop, 0px));
left: 0;
}

2
packages/frontend-embed/src/components/EmSubNoteContent.vue
View File

@@ -100,7 +100,7 @@ const collapsed = ref(isLong);
width: 100%;
margin-top: 14px;
position: sticky;
bottom: calc(var(--stickyBottom, 0px) + 14px);
bottom: calc(var(--MI-stickyBottom, 0px) + 14px);
}
.showLessLabel {

2
packages/frontend-embed/src/pages/clip.vue
View File

@@ -100,7 +100,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
gap: var(--MI-margin);
overflow: hidden;
.headerClipIconRoot {

2
packages/frontend-embed/src/pages/tag.vue
View File

@@ -83,7 +83,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
gap: var(--MI-margin);
overflow: hidden;
.headerClipIconRoot {

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

@@ -117,7 +117,7 @@ function top(ev: MouseEvent) {
display: flex;
min-width: 0;
align-items: center;
gap: var(--margin);
gap: var(--MI-margin);
overflow: hidden;
.avatarLink {

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

@@ -7,11 +7,11 @@
*/
:root {
--radius: 12px;
--marginFull: 14px;
--marginHalf: 10px;
--MI-radius: 12px;
--MI-marginFull: 14px;
--MI-marginHalf: 10px;
--margin: var(--marginFull);
--MI-margin: var(--MI-marginFull);
}
html {
@@ -218,12 +218,12 @@ rt {
._panel {
background: var(--MI_THEME-panel);
border-radius: var(--radius);
border-radius: var(--MI-radius);
overflow: clip;
}
._margin {
margin: var(--margin) 0;
margin: var(--MI-margin) 0;
}
._gaps_m {
@@ -241,7 +241,7 @@ rt {
._gaps {
display: flex;
flex-direction: column;
gap: var(--margin);
gap: var(--MI-margin);
}
._buttons {
@@ -264,7 +264,7 @@ rt {
box-sizing: border-box;
text-align: center;
border: solid 0.5px var(--MI_THEME-divider);
border-radius: var(--radius);
border-radius: var(--MI-radius);
&:active {
border-color: var(--MI_THEME-accent);
@@ -273,14 +273,14 @@ rt {
._popup {
background: var(--MI_THEME-popup);
border-radius: var(--radius);
border-radius: var(--MI-radius);
contain: content;
}
._acrylic {
background: var(--MI_THEME-acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
-webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px));
}
._fullinfo {

2
packages/frontend-embed/src/ui.vue
View File

@@ -95,7 +95,7 @@ onUnmounted(() => {
height: auto;
&.rounded {
border-radius: var(--radius);
border-radius: var(--MI-radius);
}
&.noBorder {