kaslo/pawkey-sk
1
0
Fork 0
Code Packages Activity

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
packages/frontend/src/pages/_error_.vue
+1 -1
View File
@@ -82,6 +82,6 @@ definePageMetadata({
vertical-align: bottom;
height: 128px;
margin-bottom: 24px;
border-radius: 16px;
border-radius: var(--radius-md);
}
</style>
packages/frontend/src/pages/about-sharkey.vue
+5 -5
View File
@@ -220,7 +220,7 @@ definePageMetadata({
display: block;
width: 80px;
margin: 0 auto;
border-radius: 16px;
border-radius: var(--radius-md);
position: relative;
z-index: 1;
transform: translateX(-10%);
@@ -271,7 +271,7 @@ definePageMetadata({
align-items: center;
padding: 12px;
background: var(--buttonBg);
border-radius: 6px;
border-radius: var(--radius-sm);
&:hover {
text-decoration: none;
@@ -286,7 +286,7 @@ definePageMetadata({
.contributorAvatar {
width: 30px;
border-radius: 100%;
border-radius: var(--radius-full);
}
.contributorUsername {
@@ -304,12 +304,12 @@ definePageMetadata({
align-items: center;
padding: 12px;
background: var(--buttonBg);
border-radius: 6px;
border-radius: var(--radius-sm);
}
.patronIcon {
width: 24px;
border-radius: 100%;
border-radius: var(--radius-full);
}
.patronName {
packages/frontend/src/pages/about.vue
+3 -3
View File
@@ -168,7 +168,7 @@ definePageMetadata(computed(() => ({
<style lang="scss" module>
.banner {
text-align: center;
border-radius: 10px;
border-radius: var(--radius);
overflow: clip;
background-size: cover;
background-position: center center;
@@ -178,7 +178,7 @@ definePageMetadata(computed(() => ({
display: block;
margin: 16px auto 0 auto;
height: 64px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
.bannerName {
@@ -217,7 +217,7 @@ definePageMetadata(computed(() => ({
font-weight: bold;
align-items: center;
justify-content: center;
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
}
packages/frontend/src/pages/admin-user.vue
+2 -2
View File
@@ -546,7 +546,7 @@ definePageMetadata(computed(() => ({
> .suspended, > .silenced, > .moderator {
display: inline-block;
border: solid 1px;
border-radius: 6px;
border-radius: var(--radius-sm);
padding: 2px 6px;
font-size: 85%;
}
@@ -638,7 +638,7 @@ definePageMetadata(computed(() => ({
.announcementItem {
display: flex;
padding: 8px 12px;
border-radius: 6px;
border-radius: var(--radius-sm);
cursor: pointer;
}
</style>
packages/frontend/src/pages/admin/_header_.vue
+2 -2
View File
@@ -181,7 +181,7 @@ onUnmounted(() => {
width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box;
position: relative;
border-radius: 5px;
border-radius: var(--radius-xs);
&:hover {
background: rgba(0, 0, 0, 0.05);
@@ -286,7 +286,7 @@ onUnmounted(() => {
bottom: 0;
height: 3px;
background: var(--accent);
border-radius: 999px;
border-radius: var(--radius-ellipse);
transition: all 0.2s ease;
pointer-events: none;
}
packages/frontend/src/pages/admin/index.vue
+1 -1
View File
@@ -369,7 +369,7 @@ defineExpose({
display: block;
margin: auto;
height: 42px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
}
}
packages/frontend/src/pages/admin/modlog.ModLog.vue
+1 -1
View File
@@ -149,7 +149,7 @@ const props = defineProps<{
.diff {
background: #fff;
color: #000;
border-radius: 6px;
border-radius: var(--radius-sm);
overflow: clip;
}
packages/frontend/src/pages/admin/overview.federation.vue
+1 -1
View File
@@ -146,7 +146,7 @@ onMounted(async () => {
margin-right: 12px;
background: var(--accentedBg);
color: var(--accent);
border-radius: 10px;
border-radius: var(--radius);
}
&.sub {
packages/frontend/src/pages/admin/overview.stats.vue
+1 -1
View File
@@ -115,7 +115,7 @@ onMounted(async () => {
margin-right: 12px;
background: var(--accentedBg);
color: var(--accent);
border-radius: 10px;
border-radius: var(--radius);
}
&.users {
packages/frontend/src/pages/admin/server-rules.vue
+2 -2
View File
@@ -104,7 +104,7 @@ definePageMetadata({
height: 28px;
align-items: center;
justify-content: center;
border-radius: 999px;
border-radius: var(--radius-ellipse);
margin-right: 8px;
}
@@ -119,7 +119,7 @@ definePageMetadata({
height: 40px;
color: var(--error);
margin-left: auto;
border-radius: 6px;
border-radius: var(--radius-sm);
&:hover {
background: var(--X5);
packages/frontend/src/pages/antenna-timeline.vue
+1 -1
View File
@@ -112,7 +112,7 @@ definePageMetadata(computed(() => antenna ? {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
border-radius: var(--radius-xl);
}
.tl {
packages/frontend/src/pages/channel.vue
+2 -2
View File
@@ -267,7 +267,7 @@ definePageMetadata(computed(() => channel ? {
padding: 8px 12px;
font-size: 80%;
background: rgba(0, 0, 0, 0.7);
border-radius: 6px;
border-radius: var(--radius-sm);
color: #fff;
}
@@ -282,7 +282,7 @@ definePageMetadata(computed(() => channel ? {
left: 16px;
background: rgba(0, 0, 0, 0.7);
color: var(--warn);
border-radius: 6px;
border-radius: var(--radius-sm);
font-weight: bold;
font-size: 1em;
padding: 4px 7px;
packages/frontend/src/pages/emoji-edit-dialog.vue
+1 -1
View File
@@ -206,7 +206,7 @@ async function del() {
.imgContainer {
padding: 8px;
border-radius: 6px;
border-radius: var(--radius-sm);
}
.img {
packages/frontend/src/pages/emojis.emoji.vue
+1 -1
View File
@@ -61,7 +61,7 @@ function menu(ev) {
padding: 12px;
text-align: left;
background: var(--panel);
border-radius: 8px;
border-radius: var(--radius-sm);
&:hover {
border-color: var(--accent);
packages/frontend/src/pages/follow-requests.vue
+1 -1
View File
@@ -87,7 +87,7 @@ definePageMetadata(computed(() => ({
margin: 0 12px 0 0;
width: 42px;
height: 42px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
> .body {
packages/frontend/src/pages/instance-info.vue
+1 -1
View File
@@ -254,7 +254,7 @@ definePageMetadata({
display: block;
margin: 0 16px 0 0;
height: 64px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
> .name {
packages/frontend/src/pages/invite.vue
+1 -1
View File
@@ -114,6 +114,6 @@ definePageMetadata({
width: 128px;
height: 128px;
margin-bottom: 16px;
border-radius: 16px;
border-radius: var(--radius-md);
}
</style>
packages/frontend/src/pages/list.vue
+1 -1
View File
@@ -141,7 +141,7 @@ definePageMetadata(computed(() => list ? {
width: 128px;
height: 128px;
margin-bottom: 16px;
border-radius: 16px;
border-radius: var(--radius-md);
}
.button {
packages/frontend/src/pages/my-antennas/index.vue
+1 -1
View File
@@ -74,7 +74,7 @@ onActivated(() => {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border-radius: 6px;
border-radius: var(--radius-sm);
&:hover {
border: solid 1px var(--accent);
packages/frontend/src/pages/my-lists/index.vue
+1 -1
View File
@@ -84,7 +84,7 @@ onActivated(() => {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border-radius: 6px;
border-radius: var(--radius-sm);
margin-bottom: 8px;
&:hover {
packages/frontend/src/pages/note.vue
+1 -1
View File
@@ -148,7 +148,7 @@ definePageMetadata(computed(() => note ? {
.loadPrev {
min-width: 0;
margin: 0 auto;
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
.loadNext {
packages/frontend/src/pages/page-editor/page-editor.container.vue
+1 -1
View File
@@ -63,7 +63,7 @@ function remove() {
overflow: hidden;
background: var(--panel);
border: solid 2px var(--X12);
border-radius: 8px;
border-radius: var(--radius-sm);
&:hover {
border: solid 2px var(--X13);
packages/frontend/src/pages/role.vue
+1 -1
View File
@@ -104,7 +104,7 @@ definePageMetadata(computed(() => ({
width: 128px;
height: 128px;
margin-bottom: 16px;
border-radius: 16px;
border-radius: var(--radius-md);
}
</style>
packages/frontend/src/pages/settings/apps.vue
+1 -1
View File
@@ -93,7 +93,7 @@ definePageMetadata({
margin: 0 12px 0 0;
width: 50px;
height: 50px;
border-radius: 8px;
border-radius: var(--radius-sm);
}
.appBody {
packages/frontend/src/pages/settings/drive-cleaner.vue
+1 -1
View File
@@ -152,7 +152,7 @@ definePageMetadata({
height: 12px;
background: rgba(0, 0, 0, 0.1);
overflow: clip;
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
.meterValue {
packages/frontend/src/pages/settings/drive.vue
+2 -2
View File
@@ -148,12 +148,12 @@ definePageMetadata({
.meter {
height: 10px;
background: rgba(0, 0, 0, 0.1);
border-radius: 999px;
border-radius: var(--radius-ellipse);
overflow: clip;
}
.meterValue {
height: 100%;
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
</style>
packages/frontend/src/pages/settings/profile.vue
+1 -1
View File
@@ -340,7 +340,7 @@ definePageMetadata({
background-size: cover;
background-position: center;
border: solid 1px var(--divider);
border-radius: 10px;
border-radius: var(--radius);
overflow: clip;
}
packages/frontend/src/pages/settings/reaction.vue
+1 -1
View File
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m">
<FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<div v-panel style="border-radius: var(--radius-sm);">
<Sortable v-model="reactions" :class="$style.reactions" :itemKey="item => item" :animation="150" :delay="100" :delayOnTouchOnly="true">
<template #item="{element}">
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">
packages/frontend/src/pages/settings/theme.vue
+2 -2
View File
@@ -172,7 +172,7 @@ definePageMetadata({
<style lang="scss" scoped>
.rfqxtzch {
border-radius: 6px;
border-radius: var(--radius-sm);
> .toggle {
position: relative;
@@ -246,7 +246,7 @@ definePageMetadata({
background-color: #E8CDA5;
opacity: 0;
transition: opacity 200ms ease-in-out !important;
border-radius: 100%;
border-radius: var(--radius-full);
}
.crater--1 {
packages/frontend/src/pages/theme-editor.vue
+4 -4
View File
@@ -244,7 +244,7 @@ definePageMetadata({
position: relative;
width: 64px;
height: 64px;
border-radius: 8px;
border-radius: var(--radius-sm);
> .preview {
position: absolute;
@@ -255,7 +255,7 @@ definePageMetadata({
margin: auto;
width: 42px;
height: 42px;
border-radius: 4px;
border-radius: var(--radius-xs);
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
transition: transform 0.15s ease;
}
@@ -271,10 +271,10 @@ definePageMetadata({
}
&.rounded {
border-radius: 999px;
border-radius: var(--radius-ellipse);
> .preview {
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
}
packages/frontend/src/pages/timeline.vue
+1 -1
View File
@@ -259,7 +259,7 @@ definePageMetadata(computed(() => ({
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
border-radius: var(--radius-xl);
}
.postForm {
packages/frontend/src/pages/user-list-timeline.vue
+1 -1
View File
@@ -92,7 +92,7 @@ definePageMetadata(computed(() => list ? {
display: block;
margin: var(--margin) auto 0 auto;
padding: 8px 16px;
border-radius: 32px;
border-radius: var(--radius-xl);
}
.tl {
packages/frontend/src/pages/user/home.vue
+7 -7
View File
@@ -425,7 +425,7 @@ onUnmounted(() => {
color: #fff;
background: rgba(0, 0, 0, 0.7);
font-size: 0.7em;
border-radius: 6px;
border-radius: var(--radius-sm);
}
> .actions {
@@ -436,7 +436,7 @@ onUnmounted(() => {
backdrop-filter: var(--blur, blur(8px));
background: rgba(0, 0, 0, 0.2);
padding: 8px;
border-radius: 24px;
border-radius: var(--radius-lg);
> .menu {
vertical-align: bottom;
@@ -488,7 +488,7 @@ onUnmounted(() => {
color: #fff;
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
border-radius: 24px;
border-radius: var(--radius-lg);
padding: 4px 8px;
font-size: 80%;
}
@@ -532,7 +532,7 @@ onUnmounted(() => {
> .role {
border: solid 1px var(--color, var(--divider));
border-radius: 999px;
border-radius: var(--radius-ellipse);
margin-right: 4px;
padding: 3px 8px;
}
@@ -547,7 +547,7 @@ onUnmounted(() => {
background: transparent;
color: var(--fg);
border: 1px solid var(--divider);
border-radius: 8px;
border-radius: var(--radius-sm);
padding: 8px;
line-height: 0;
@@ -755,10 +755,10 @@ onUnmounted(() => {
padding: calc(var(--margin) / 2) 0;
background: color-mix(in srgb, var(--bg) 65%, transparent);
backdrop-filter: var(--blur, blur(15px));
border-radius: 8px;
border-radius: var(--radius-sm);
> button {
border-radius: 8px;
border-radius: var(--radius-sm);
margin-left: 0.4rem;
margin-right: 0.4rem;
}
packages/frontend/src/pages/user/index.files.vue
+1 -1
View File
@@ -89,7 +89,7 @@ onMounted(() => {
.img {
height: 128px;
border-radius: 6px;
border-radius: var(--radius-sm);
overflow: clip;
}
packages/frontend/src/pages/user/lists.vue
+1 -1
View File
@@ -45,7 +45,7 @@ const pagination = {
display: block;
padding: 16px;
border: solid 1px var(--divider);
border-radius: 6px;
border-radius: var(--radius-sm);
margin-bottom: 8px;
&:hover {
packages/frontend/src/pages/welcome.entrance.a.vue
+3 -3
View File
@@ -155,7 +155,7 @@ os.apiGet('federation/instances', {
background: var(--acrylicPanel);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-radius: 999px;
border-radius: var(--radius-ellipse);
overflow: clip;
width: 800px;
padding: 8px 0;
@@ -175,14 +175,14 @@ os.apiGet('federation/instances', {
padding: 6px 12px 6px 6px;
margin: 0 10px 0 0;
background: var(--panel);
border-radius: 999px;
border-radius: var(--radius-ellipse);
> :global(.icon) {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 999px;
border-radius: var(--radius-ellipse);
}
}
</style>
packages/frontend/src/pages/welcome.timeline.vue
+1 -1
View File
@@ -88,7 +88,7 @@ onUpdated(() => {
padding: 16px;
margin: 0 0 0 auto;
max-width: max-content;
border-radius: 16px;
border-radius: var(--radius-md);
}
.richcontent {