Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upd: implement radius setting

Browse source 
to keep things manageable i merged a lot of one off values into just a
handful of common sizes, so some parts of the ui will look different than
upstream even with the "Misskey" rounding mode
This commit is contained in:
ShittyKopper 2023-10-31 21:44:34 +03:00
parent e33a4d1295
commit ae5d052274
122 changed files with 229 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/ui/_common_/navbar-for-mobile.vue
View file

@ -149,7 +149,7 @@ function more() {
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
border-radius: var(--radius-ellipse);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
@ -236,7 +236,7 @@ function more() {
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
border-radius: var(--radius-ellipse);
background: var(--accentedBg);
}
}

8
packages/frontend/src/ui/_common_/navbar.vue
View file

@ -202,7 +202,7 @@ function more(ev: MouseEvent) {
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
border-radius: var(--radius-ellipse);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
@ -296,7 +296,7 @@ function more(ev: MouseEvent) {
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
border-radius: var(--radius-ellipse);
background: var(--accentedBg);
}
}
@ -388,7 +388,7 @@ function more(ev: MouseEvent) {
margin: auto;
width: 52px;
aspect-ratio: 1/1;
border-radius: 100%;
border-radius: var(--radius-full);
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
@ -457,7 +457,7 @@ function more(ev: MouseEvent) {
left: 0;
right: 0;
bottom: 0;
border-radius: 999px;
border-radius: var(--radius-ellipse);
background: var(--accentedBg);
}

2
packages/frontend/src/ui/_common_/notification.vue
View file

@ -22,7 +22,7 @@ defineProps<{
<style lang="scss" module>
.root {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
border-radius: 8px;
border-radius: var(--radius-sm);
overflow: clip;
contain: content;
}

4
packages/frontend/src/ui/_common_/upload.vue
View file

@ -40,7 +40,7 @@ const zIndex = os.claimZIndex('high');
padding: 16px 20px;
pointer-events: none;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
border-radius: 8px;
border-radius: var(--radius-sm);
}
.mk-uploader:empty {
display: none;
@ -116,7 +116,7 @@ const zIndex = os.claimZIndex('high');
display: block;
background: transparent;
border: none;
border-radius: 4px;
border-radius: var(--radius-xs);
overflow: hidden;
grid-column: 2/3;
grid-row: 2/3;

2
packages/frontend/src/ui/deck.vue
View file

@ -451,7 +451,7 @@ body {
width: 100%;
max-width: 60px;
margin: auto;
border-radius: 100%;
border-radius: var(--radius-full);
background: var(--panel);
color: var(--fg);

4
packages/frontend/src/ui/deck/column.vue
View file

@ -255,7 +255,7 @@ function onDrop(ev) {
height: 100%;
overflow: clip;
contain: strict;
border-radius: 10px;
border-radius: var(--radius);
&.draghover {
&:after {
@ -356,7 +356,7 @@ function onDrop(ev) {
width: 3px;
height: calc(100% - 24px);
background: var(--accent);
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
.tabShape {

4
packages/frontend/src/ui/universal.vue
View file

@ -350,7 +350,7 @@ $widgets-hide-threshold: 1090px;
right: 32px;
width: 64px;
height: 64px;
border-radius: 100%;
border-radius: var(--radius-full);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
font-size: 22px;
background: var(--panel);
@ -410,7 +410,7 @@ $widgets-hide-threshold: 1090px;
width: 100%;
max-width: 60px;
margin: auto;
border-radius: 100%;
border-radius: var(--radius-full);
background: var(--panel);
color: var(--fg);

2
packages/frontend/src/ui/visitor.vue
View file

@ -276,7 +276,7 @@ defineExpose({
padding: 10px;
box-sizing: border-box;
text-align: center;
border-radius: 999px;
border-radius: var(--radius-ellipse);
&._button {
background: var(--panel);

2
packages/frontend/src/ui/zen.vue
View file

@ -72,7 +72,7 @@ document.documentElement.style.overflowY = 'scroll';
width: 100%;
max-width: 60px;
margin: auto;
border-radius: 100%;
border-radius: var(--radius-full);
background: var(--panel);
color: var(--fg);
right: var(--margin);