graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-26 20:43:08 +02:00
Code Issues Projects Releases Packages Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkAbuseReport.vue
View file

@ -84,7 +84,7 @@ function resolve() {
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
padding: 14px; padding: 14px;
border-radius: 8px; border-radius: var(--radius-sm);
--c: rgb(255 196 0 / 15%); --c: rgb(255 196 0 / 15%);
background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%); background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
background-size: 16px 16px; background-size: 16px 16px;

4
packages/frontend/src/components/MkAchievements.vue
View file

@ -123,7 +123,7 @@ onMounted(() => {
width: 58px; width: 58px;
height: 58px; height: 58px;
padding: 6px; padding: 6px;
border-radius: 100%; border-radius: var(--radius-full);
box-sizing: border-box; box-sizing: border-box;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
@ -190,7 +190,7 @@ onMounted(() => {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 100%; border-radius: var(--radius-full);
box-shadow: 0 1px 0px #ffffff88 inset; box-shadow: 0 1px 0px #ffffff88 inset;
} }

2
packages/frontend/src/components/MkAsUi.vue
View file

@ -125,6 +125,6 @@ function openPostForm() {
.postForm { .postForm {
background: var(--bg); background: var(--bg);
border-radius: 8px; border-radius: var(--radius-sm);
} }
</style> </style>

2
packages/frontend/src/components/MkAutocomplete.vue
View file

@ -433,7 +433,7 @@ onBeforeUnmount(() => {
max-width: 28px; max-width: 28px;
max-height: 28px; max-height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
border-radius: 100%; border-radius: var(--radius-full);
} }
.userName { .userName {

8
packages/frontend/src/components/MkButton.vue
View file

@ -126,7 +126,7 @@ function onMousedown(evt: MouseEvent): void {
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 5px; border-radius: var(--radius-xs);
overflow: clip; overflow: clip;
box-sizing: border-box; box-sizing: border-box;
transition: background 0.1s ease; transition: background 0.1s ease;
@ -154,7 +154,7 @@ function onMousedown(evt: MouseEvent): void {
} }
&.rounded { &.rounded {
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
&.primary { &.primary {
@ -264,7 +264,7 @@ function onMousedown(evt: MouseEvent): void {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
pointer-events: none; pointer-events: none;
} }
@ -273,7 +273,7 @@ function onMousedown(evt: MouseEvent): void {
position: absolute; position: absolute;
width: 2px; width: 2px;
height: 2px; height: 2px;
border-radius: 100%; border-radius: var(--radius-full);
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);

4
packages/frontend/src/components/MkChannelFollowButton.vue
View file

@ -73,7 +73,7 @@ async function onClick() {
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: 32px; border-radius: var(--radius-xl);
background: #fff; background: #fff;
&.full { &.full {
@ -95,7 +95,7 @@ async function onClick() {
bottom: -5px; bottom: -5px;
left: -5px; left: -5px;
border: 2px solid var(--focus); border: 2px solid var(--focus);
border-radius: 32px; border-radius: var(--radius-xl);
} }
} }

4
packages/frontend/src/components/MkChannelPreview.vue
View file

@ -100,7 +100,7 @@ const bannerStyle = computed(() => {
padding: 8px 12px; padding: 8px 12px;
font-size: 80%; font-size: 80%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
border-radius: 6px; border-radius: var(--radius-sm);
color: #fff; color: #fff;
} }
@ -111,7 +111,7 @@ const bannerStyle = computed(() => {
left: 16px; left: 16px;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: var(--warn); color: var(--warn);
border-radius: 6px; border-radius: var(--radius-sm);
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
padding: 4px 7px; padding: 4px 7px;

4
packages/frontend/src/components/MkChartLegend.vue
View file

@ -55,7 +55,7 @@ defineExpose({
font-size: 85%; font-size: 85%;
padding: 4px 12px 4px 8px; padding: 4px 12px 4px 8px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 999px; border-radius: var(--radius-ellipse);
&:hover { &:hover {
border-color: var(--inputBorderHover); border-color: var(--inputBorderHover);
@ -70,7 +70,7 @@ defineExpose({
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 100%; border-radius: var(--radius-full);
vertical-align: -10%; vertical-align: -10%;
} }
} }

2
packages/frontend/src/components/MkColorInput.vue
View file

@ -102,7 +102,7 @@ const onInput = (ev: KeyboardEvent) => {
color: var(--fg); color: var(--fg);
background: var(--panel); background: var(--panel);
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

2
packages/frontend/src/components/MkContainer.vue
View file

@ -223,7 +223,7 @@ onUnmounted(() => {
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }

2
packages/frontend/src/components/MkDialog.vue
View file

@ -197,7 +197,7 @@ onBeforeUnmount(() => {
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background: var(--panel); background: var(--panel);
border-radius: 16px; border-radius: var(--radius-md);
} }
.icon { .icon {

2
packages/frontend/src/components/MkDrive.file.vue
View file

@ -107,7 +107,7 @@ function onDragend() {
position: relative; position: relative;
padding: 8px 0 0 0; padding: 8px 0 0 0;
min-height: 180px; min-height: 180px;
border-radius: 8px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
&:hover { &:hover {

4
packages/frontend/src/components/MkDrive.folder.vue
View file

@ -289,7 +289,7 @@ function onContextmenu(ev: MouseEvent) {
padding: 8px; padding: 8px;
height: 64px; height: 64px;
background: var(--driveFolderBg); background: var(--driveFolderBg);
border-radius: 4px; border-radius: var(--radius-xs);
cursor: pointer; cursor: pointer;
&.draghover { &.draghover {
@ -302,7 +302,7 @@ function onContextmenu(ev: MouseEvent) {
bottom: -4px; bottom: -4px;
left: -4px; left: -4px;
border: 2px dashed var(--focus); border: 2px dashed var(--focus);
border-radius: 4px; border-radius: var(--radius-xs);
} }
} }
} }

2
packages/frontend/src/components/MkDriveFileThumbnail.vue
View file

@ -63,7 +63,7 @@ const isThumbnailAvailable = computed(() => {
position: relative; position: relative;
display: flex; display: flex;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }

2
packages/frontend/src/components/MkEmojiPicker.vue
View file

@ -594,7 +594,7 @@ defineExpose({
width: var(--eachSize); width: var(--eachSize);
height: var(--eachSize); height: var(--eachSize);
contain: strict; contain: strict;
border-radius: 4px; border-radius: var(--radius-xs);
font-size: 24px; font-size: 24px;
&:focus-visible { &:focus-visible {

2
packages/frontend/src/components/MkEmojiPickerDialog.vue
View file

@ -74,7 +74,7 @@ function opening() {
<style lang="scss" module> <style lang="scss" module>
.drawer { .drawer {
border-radius: 24px; border-radius: var(--radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }

2
packages/frontend/src/components/MkFileListForAdmin.vue
View file

@ -108,7 +108,7 @@ const props = defineProps<{
padding: 2px 4px; padding: 2px 4px;
background: #ff0000bf; background: #ff0000bf;
color: #fff; color: #fff;
border-radius: 4px; border-radius: var(--radius-xs);
font-size: 85%; font-size: 85%;
animation: sensitive-blink 1s infinite; animation: sensitive-blink 1s infinite;
} }

6
packages/frontend/src/components/MkFolder.vue
View file

@ -139,7 +139,7 @@ onMounted(() => {
background: var(--buttonBg); background: var(--buttonBg);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
border-radius: 6px; border-radius: var(--radius-sm);
transition: border-radius 0.3s; transition: border-radius 0.3s;
&:hover { &:hover {
@ -153,7 +153,7 @@ onMounted(() => {
} }
&.opened { &.opened {
border-radius: 6px 6px 0 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
} }
} }
@ -207,7 +207,7 @@ onMounted(() => {
.body { .body {
background: var(--panel); background: var(--panel);
border-radius: 0 0 6px 6px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
container-type: inline-size; container-type: inline-size;
&.bgSame { &.bgSame {

4
packages/frontend/src/components/MkFollowButton.vue
View file

@ -151,7 +151,7 @@ onBeforeUnmount(() => {
padding: 0; padding: 0;
height: 31px; height: 31px;
font-size: 16px; font-size: 16px;
border-radius: 32px; border-radius: var(--radius-xl);
background: #fff; background: #fff;
&.full { &.full {
@ -179,7 +179,7 @@ onBeforeUnmount(() => {
bottom: -5px; bottom: -5px;
left: -5px; left: -5px;
border: 2px solid var(--focus); border: 2px solid var(--focus);
border-radius: 32px; border-radius: var(--radius-xl);
} }
} }

4
packages/frontend/src/components/MkGoogle.vue
View file

@ -40,7 +40,7 @@ const search = () => {
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 4px 0 0 4px; border-radius: var(--radius-xs) 0 0 var(--radius-xs);
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }
@ -50,7 +50,7 @@ const search = () => {
padding: 0 16px; padding: 0 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-left: none; border-left: none;
border-radius: 0 4px 4px 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
&:active { &:active {
box-shadow: 0 2px 4px rgba(#000, 0.15) inset; box-shadow: 0 2px 4px rgba(#000, 0.15) inset;

2
packages/frontend/src/components/MkInput.vue
View file

@ -227,7 +227,7 @@ defineExpose({
color: var(--fg); color: var(--fg);
background: var(--panel); background: var(--panel);
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

4
packages/frontend/src/components/MkInstanceCardMini.vue
View file

@ -46,14 +46,14 @@ function getInstanceIcon(instance): string {
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: var(--radius-sm);
> :global(.icon) { > :global(.icon) {
display: block; display: block;
width: ($bodyTitleHieght + $bodyInfoHieght); width: ($bodyTitleHieght + $bodyInfoHieght);
height: ($bodyTitleHieght + $bodyInfoHieght); height: ($bodyTitleHieght + $bodyInfoHieght);
object-fit: cover; object-fit: cover;
border-radius: 4px; border-radius: var(--radius-xs);
margin-right: 10px; margin-right: 10px;
} }

2
packages/frontend/src/components/MkInstanceTicker.vue
View file

@ -46,7 +46,7 @@ $height: 2ex;
display: flex; display: flex;
align-items: center; align-items: center;
height: $height; height: $height;
border-radius: 4px 0 0 4px; border-radius: var(--radius-xs) 0 0 var(--radius-xs);
overflow: clip; overflow: clip;
color: #fff; color: #fff;
text-shadow: /* .866 ≈ sin(60deg) */ text-shadow: /* .866 ≈ sin(60deg) */

6
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -77,12 +77,12 @@ function close() {
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
text-align: left; text-align: left;
border-radius: 16px; border-radius: var(--radius-md);
&.asDrawer { &.asDrawer {
width: 100%; width: 100%;
padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px; padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
border-radius: 24px; border-radius: var(--radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
text-align: center; text-align: center;
@ -100,7 +100,7 @@ function close() {
justify-content: center; justify-content: center;
vertical-align: bottom; vertical-align: bottom;
height: 100px; height: 100px;
border-radius: 10px; border-radius: var(--radius);
&:hover { &:hover {
color: var(--accent); color: var(--accent);

4
packages/frontend/src/components/MkMediaBanner.vue
View file

@ -55,7 +55,7 @@ watch(audioEl, () => {
<style lang="scss" module> <style lang="scss" module>
.root { .root {
width: 100%; width: 100%;
border-radius: 4px; border-radius: var(--radius-xs);
margin-top: 4px; margin-top: 4px;
overflow: clip; overflow: clip;
} }
@ -79,7 +79,7 @@ watch(audioEl, () => {
} }
.audio { .audio {
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }
</style> </style>

6
packages/frontend/src/components/MkMediaImage.vue
View file

@ -157,7 +157,7 @@ function showMenu(ev: MouseEvent) {
.hide { .hide {
display: block; display: block;
position: absolute; position: absolute;
border-radius: 6px; border-radius: var(--radius-sm);
background-color: black; background-color: black;
color: var(--accentLighten); color: var(--accentLighten);
font-size: 12px; font-size: 12px;
@ -187,7 +187,7 @@ function showMenu(ev: MouseEvent) {
.menu { .menu {
display: block; display: block;
position: absolute; position: absolute;
border-radius: 999px; border-radius: var(--radius-ellipse);
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: var(--blur, blur(15px)); -webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
@ -223,7 +223,7 @@ function showMenu(ev: MouseEvent) {
.indicator { .indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */ /* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
background-color: black; background-color: black;
border-radius: 6px; border-radius: var(--radius-sm);
color: var(--accentLighten); color: var(--accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;

2
packages/frontend/src/components/MkMediaList.vue
View file

@ -341,7 +341,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
.media { .media {
overflow: hidden; // clipにするとバグる overflow: hidden; // clipにするとバグる
border-radius: 8px; border-radius: var(--radius-sm);
} }
:global(.pswp) { :global(.pswp) {

4
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -77,7 +77,7 @@ watch(videoEl, () => {
.hide { .hide {
display: block; display: block;
position: absolute; position: absolute;
border-radius: 6px; border-radius: var(--radius-sm);
background-color: black; background-color: black;
color: var(--accentLighten); color: var(--accentLighten);
font-size: 14px; font-size: 14px;
@ -127,7 +127,7 @@ watch(videoEl, () => {
.indicator { .indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */ /* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
background-color: black; background-color: black;
border-radius: 6px; border-radius: var(--radius-sm);
color: var(--accentLighten); color: var(--accentLighten);
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;

4
packages/frontend/src/components/MkMention.vue
View file

@ -49,7 +49,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
.root { .root {
display: inline-block; display: inline-block;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
border-radius: 999px; border-radius: var(--radius-ellipse);
color: var(--mention); color: var(--mention);
&.isMe { &.isMe {
@ -63,7 +63,7 @@ const avatarUrl = computed(() => defaultStore.state.disableShowingAnimatedImages
object-fit: cover; object-fit: cover;
margin: 0 0.2em 0 0; margin: 0 0.2em 0 0;
vertical-align: bottom; vertical-align: bottom;
border-radius: 100%; border-radius: var(--radius-full);
} }
.host { .host {

6
packages/frontend/src/components/MkMenu.vue
View file

@ -241,7 +241,7 @@ onBeforeUnmount(() => {
&.asDrawer { &.asDrawer {
padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
width: 100%; width: 100%;
border-radius: 24px; border-radius: var(--radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
@ -251,7 +251,7 @@ onBeforeUnmount(() => {
&:before { &:before {
width: calc(100% - 24px); width: calc(100% - 24px);
border-radius: 12px; border-radius: var(--radius);
} }
> .icon { > .icon {
@ -290,7 +290,7 @@ onBeforeUnmount(() => {
margin: auto; margin: auto;
width: calc(100% - 16px); width: calc(100% - 16px);
height: 100%; height: 100%;
border-radius: 6px; border-radius: var(--radius-sm);
} }
&:not(:disabled):hover { &:not(:disabled):hover {

10
packages/frontend/src/components/MkNote.vue
View file

@ -699,7 +699,7 @@ function readPromo() {
padding: 0 4px; padding: 0 4px;
margin-bottom: 0 !important; margin-bottom: 0 !important;
background: var(--popup); background: var(--popup);
border-radius: 8px; border-radius: var(--radius-sm);
box-shadow: 0px 4px 32px var(--shadow); box-shadow: 0px 4px 32px var(--shadow);
} }
@ -831,7 +831,7 @@ function readPromo() {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 16px); height: calc(100% - 16px);
border-radius: 999px; border-radius: var(--radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -871,7 +871,7 @@ function readPromo() {
background: var(--popup); background: var(--popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -901,7 +901,7 @@ function readPromo() {
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -937,7 +937,7 @@ function readPromo() {
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--renote);
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }

8
packages/frontend/src/components/MkNoteDetailed.vue
View file

@ -739,7 +739,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
width: 28px; width: 28px;
height: 28px; height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
border-radius: 6px; border-radius: var(--radius-sm);
} }
.renoteText { .renoteText {
@ -813,7 +813,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--divider); border: solid 0.5px var(--divider);
border-radius: 4px; border-radius: var(--radius-xs);
} }
.noteHeaderInfo { .noteHeaderInfo {
@ -869,7 +869,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--renote);
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }
@ -947,7 +947,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.reactionTab { .reactionTab {
padding: 4px 6px; padding: 4px 6px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 6px; border-radius: var(--radius-sm);
} }
.reactionTabActive { .reactionTabActive {

2
packages/frontend/src/components/MkNoteHeader.vue
View file

@ -81,7 +81,7 @@ async function menuVersions(viaKeyboard = false): Promise<void> {
padding: 1px 6px; padding: 1px 6px;
font-size: 80%; font-size: 80%;
border: solid 0.5px var(--divider); border: solid 0.5px var(--divider);
border-radius: 3px; border-radius: var(--radius-xs);
} }
.username { .username {

2
packages/frontend/src/components/MkNotePreview.vue
View file

@ -44,7 +44,7 @@ const props = defineProps<{
margin: 0 10px 0 0 !important; margin: 0 10px 0 0 !important;
width: 40px !important; width: 40px !important;
height: 40px !important; height: 40px !important;
border-radius: 8px !important; border-radius: var(--radius-sm) !important;
pointer-events: none !important; pointer-events: none !important;
} }

2
packages/frontend/src/components/MkNoteSimple.vue
View file

@ -56,7 +56,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0 10px 0 0; margin: 0 10px 0 0;
width: 34px; width: 34px;
height: 34px; height: 34px;
border-radius: 8px; border-radius: var(--radius-sm);
position: sticky !important; position: sticky !important;
top: calc(16px + var(--stickyTop, 0px)); top: calc(16px + var(--stickyTop, 0px));
left: 0; left: 0;

6
packages/frontend/src/components/MkNoteSub.vue
View file

@ -418,7 +418,7 @@ if (props.detail) {
left: 8px; left: 8px;
width: 5px; width: 5px;
height: calc(100% - 8px); height: calc(100% - 8px);
border-radius: 999px; border-radius: var(--radius-ellipse);
pointer-events: none; pointer-events: none;
} }
@ -428,7 +428,7 @@ if (props.detail) {
margin: 0 8px 0 0; margin: 0 8px 0 0;
width: 38px; width: 38px;
height: 38px; height: 38px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
.body { .body {
@ -514,6 +514,6 @@ if (props.detail) {
padding: 8px !important; padding: 8px !important;
border: 1px solid var(--divider); border: 1px solid var(--divider);
margin: 8px 8px 0 8px; margin: 8px 8px 0 8px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
</style> </style>

4
packages/frontend/src/components/MkNotification.vue
View file

@ -181,7 +181,7 @@ useTooltip(reactionRef, (showing) => {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 6px; border-radius: var(--radius-sm);
} }
.subIcon { .subIcon {
@ -192,7 +192,7 @@ useTooltip(reactionRef, (showing) => {
width: 20px; width: 20px;
height: 20px; height: 20px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 100%; border-radius: var(--radius-full);
background: var(--panel); background: var(--panel);
box-shadow: 0 0 0 3px var(--panel); box-shadow: 0 0 0 3px var(--panel);
font-size: 11px; font-size: 11px;

2
packages/frontend/src/components/MkOmit.vue
View file

@ -69,7 +69,7 @@ onUnmounted(() => {
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }

4
packages/frontend/src/components/MkPoll.vue
View file

@ -116,7 +116,7 @@ async function refresh() {
padding: 4px; padding: 4px;
//border: solid 0.5px var(--divider); //border: solid 0.5px var(--divider);
background: var(--accentedBg); background: var(--accentedBg);
border-radius: 4px; border-radius: var(--radius-xs);
overflow: clip; overflow: clip;
cursor: pointer; cursor: pointer;
} }
@ -136,7 +136,7 @@ async function refresh() {
display: inline-block; display: inline-block;
padding: 3px 5px; padding: 3px 5px;
background: var(--panel); background: var(--panel);
border-radius: 3px; border-radius: var(--radius-xs);
} }
.info { .info {

2
packages/frontend/src/components/MkPopupMenu.vue
View file

@ -73,7 +73,7 @@ function close() {
<style lang="scss" module> <style lang="scss" module>
.drawer { .drawer {
border-radius: 24px; border-radius: var(--radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }

12
packages/frontend/src/components/MkPostForm.vue
View file

@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAcct :user="u"/> <MkAcct :user="u"/>
<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ph-x ph-bold ph-lg"></i></button> <button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ph-x ph-bold ph-lg"></i></button>
</span> </span>
<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ph-plus ph-bold ph-lg ti-fw"></i></button> <button class="_buttonPrimary" style="padding: 4px; border-radius: var(--radius-sm);" @click="addVisibleUser"><i class="ph-plus ph-bold ph-lg ti-fw"></i></button>
</div> </div>
</div> </div>
<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo> <MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@ -998,7 +998,7 @@ defineExpose({
padding: 0 12px; padding: 0 12px;
line-height: 34px; line-height: 34px;
font-weight: bold; font-weight: bold;
border-radius: 6px; border-radius: var(--radius-sm);
min-width: 90px; min-width: 90px;
box-sizing: border-box; box-sizing: border-box;
color: var(--fgOnAccent); color: var(--fgOnAccent);
@ -1008,7 +1008,7 @@ defineExpose({
.headerRightItem { .headerRightItem {
margin: 0; margin: 0;
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: var(--radius-sm);
&:hover { &:hover {
background: var(--X5); background: var(--X5);
@ -1071,7 +1071,7 @@ defineExpose({
.visibleUser { .visibleUser {
margin-right: 14px; margin-right: 14px;
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
border-radius: 8px; border-radius: var(--radius-sm);
background: var(--X4); background: var(--X4);
} }
@ -1140,7 +1140,7 @@ defineExpose({
padding: 4px 6px; padding: 4px 6px;
font-size: .9em; font-size: .9em;
color: var(--warn); color: var(--warn);
border-radius: 6px; border-radius: var(--radius-sm);
min-width: 1.6em; min-width: 1.6em;
text-align: center; text-align: center;
@ -1180,7 +1180,7 @@ defineExpose({
font-size: 1em; font-size: 1em;
width: auto; width: auto;
height: 100%; height: 100%;
border-radius: 6px; border-radius: var(--radius-sm);
&:hover { &:hover {
background: var(--X5); background: var(--X5);

2
packages/frontend/src/components/MkPostFormAttaches.vue
View file

@ -143,7 +143,7 @@ function showFileMenu(file: Misskey.entities.DriveFile, ev: MouseEvent): void {
width: 64px; width: 64px;
height: 64px; height: 64px;
margin-right: 4px; margin-right: 4px;
border-radius: 4px; border-radius: var(--radius-xs);
overflow: hidden; overflow: hidden;
cursor: move; cursor: move;
} }

6
packages/frontend/src/components/MkRadio.vue
View file

@ -55,7 +55,7 @@ function toggle(): void {
background-color: var(--panel); background-color: var(--panel);
background-clip: padding-box !important; background-clip: padding-box !important;
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 90%; font-size: 90%;
transition: all 0.2s; transition: all 0.2s;
user-select: none; user-select: none;
@ -101,7 +101,7 @@ function toggle(): void {
height: 14px; height: 14px;
background: none; background: none;
border: solid 2px var(--inputBorder); border: solid 2px var(--inputBorder);
border-radius: 100%; border-radius: var(--radius-full);
transition: inherit; transition: inherit;
&:after { &:after {
@ -112,7 +112,7 @@ function toggle(): void {
right: 3px; right: 3px;
bottom: 3px; bottom: 3px;
left: 3px; left: 3px;
border-radius: 100%; border-radius: var(--radius-full);
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

8
packages/frontend/src/components/MkRange.vue
View file

@ -186,7 +186,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
padding: 7px 12px; padding: 7px 12px;
background: var(--panel); background: var(--panel);
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
> .container { > .container {
position: relative; position: relative;
@ -202,7 +202,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
width: calc(100% - #{$thumbWidth}); width: calc(100% - #{$thumbWidth});
height: 3px; height: 3px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 999px; border-radius: var(--radius-ellipse);
overflow: clip; overflow: clip;
> .highlight { > .highlight {
@ -233,7 +233,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
height: 3px; height: 3px;
margin-left: - math.div($tickWidth, 2); margin-left: - math.div($tickWidth, 2);
background: var(--divider); background: var(--divider);
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
} }
@ -243,7 +243,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
height: $thumbHeight; height: $thumbHeight;
cursor: grab; cursor: grab;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: var(--radius-ellipse);
&:hover { &:hover {
background: var(--accentLighten); background: var(--accentLighten);

6
packages/frontend/src/components/MkReactionsViewer.reaction.vue
View file

@ -119,7 +119,7 @@ useTooltip(buttonEl, async (showing) => {
margin: 2px; margin: 2px;
padding: 0 6px; padding: 0 6px;
font-size: 1.5em; font-size: 1.5em;
border-radius: 6px; border-radius: var(--radius-sm);
&.canToggle { &.canToggle {
background: var(--buttonBg); background: var(--buttonBg);
@ -136,7 +136,7 @@ useTooltip(buttonEl, async (showing) => {
&.small { &.small {
height: 32px; height: 32px;
font-size: 1em; font-size: 1em;
border-radius: 4px; border-radius: var(--radius-xs);
> .count { > .count {
font-size: 0.9em; font-size: 0.9em;
@ -147,7 +147,7 @@ useTooltip(buttonEl, async (showing) => {
&.large { &.large {
height: 52px; height: 52px;
font-size: 2em; font-size: 2em;
border-radius: 8px; border-radius: var(--radius-sm);
> .count { > .count {
font-size: 0.6em; font-size: 0.6em;

2
packages/frontend/src/components/MkSelect.vue
View file

@ -241,7 +241,7 @@ function show(ev: MouseEvent) {
color: var(--fg); color: var(--fg);
background: var(--panel); background: var(--panel);
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

2
packages/frontend/src/components/MkSignin.vue
View file

@ -236,6 +236,6 @@ function resetPassword(): void {
background: #ddd; background: #ddd;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
border-radius: 100%; border-radius: var(--radius-full);
} }
</style> </style>

2
packages/frontend/src/components/MkSignupDialog.rules.vue
View file

@ -182,7 +182,7 @@ async function updateAgreeNote(v: boolean) {
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
} }

4
packages/frontend/src/components/MkSubNoteContent.vue
View file

@ -88,7 +88,7 @@ const collapsed = $ref(isLong);
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
@ -131,7 +131,7 @@ const collapsed = $ref(isLong);
background: var(--popup); background: var(--popup);
padding: 6px 10px; padding: 6px 10px;
font-size: 0.8em; font-size: 0.8em;
border-radius: 999px; border-radius: var(--radius-ellipse);
box-shadow: 0 2px 6px rgb(0 0 0 / 20%); box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
} }
</style> </style>

4
packages/frontend/src/components/MkSuperMenu.vue
View file

@ -59,7 +59,7 @@ defineProps<{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 9px 16px 9px 8px; padding: 9px 16px 9px 8px;
border-radius: 9px; border-radius: var(--radius-sm);
font-size: 0.9em; font-size: 0.9em;
&:hover { &:hover {
@ -141,7 +141,7 @@ defineProps<{
height: 60px; height: 60px;
aspect-ratio: 1; aspect-ratio: 1;
background: var(--panel); background: var(--panel);
border-radius: 100%; border-radius: var(--radius-full);
} }
> .text { > .text {

4
packages/frontend/src/components/MkSwitch.button.vue
View file

@ -52,7 +52,7 @@ const toggle = () => {
background: var(--switchOffBg); background: var(--switchOffBg);
background-clip: content-box; background-clip: content-box;
border: solid 1px var(--switchOffBg); border: solid 1px var(--switchOffBg);
border-radius: 999px; border-radius: var(--radius-ellipse);
cursor: pointer; cursor: pointer;
transition: inherit; transition: inherit;
user-select: none; user-select: none;
@ -72,7 +72,7 @@ const toggle = () => {
top: 3px; top: 3px;
width: 15px; width: 15px;
height: 15px; height: 15px;
border-radius: 999px; border-radius: var(--radius-ellipse);
transition: all 0.2s ease; transition: all 0.2s ease;
&:not(.knobChecked) { &:not(.knobChecked) {

2
packages/frontend/src/components/MkTab.vue
View file

@ -39,7 +39,7 @@ export default defineComponent({
> button { > button {
flex: 1; flex: 1;
padding: 10px 8px; padding: 10px 8px;
border-radius: 999px; border-radius: var(--radius-ellipse);
&:disabled { &:disabled {
opacity: 1 !important; opacity: 1 !important;

2
packages/frontend/src/components/MkTextarea.vue
View file

@ -153,7 +153,7 @@ onMounted(() => {
color: var(--fg); color: var(--fg);
background: var(--panel); background: var(--panel);
border: solid 1px var(--panel); border: solid 1px var(--panel);
border-radius: 6px; border-radius: var(--radius-sm);
outline: none; outline: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;

2
packages/frontend/src/components/MkToast.vue
View file

@ -66,7 +66,7 @@ onMounted(() => {
max-width: calc(100% - 32px); max-width: calc(100% - 32px);
width: min-content; width: min-content;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;

2
packages/frontend/src/components/MkTooltip.vue
View file

@ -106,7 +106,7 @@ onUnmounted(() => {
padding: 8px 12px; padding: 8px 12px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border-radius: 4px; border-radius: var(--radius-xs);
border: solid 0.5px var(--divider); border: solid 0.5px var(--divider);
pointer-events: none; pointer-events: none;
transform-origin: center center; transform-origin: center center;

2
packages/frontend/src/components/MkUrlPreview.vue
View file

@ -231,7 +231,7 @@ onUnmounted(() => {
display: block; display: block;
font-size: 14px; font-size: 14px;
box-shadow: 0 0 0 1px var(--divider); box-shadow: 0 0 0 1px var(--divider);
border-radius: 8px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
&:hover { &:hover {

2
packages/frontend/src/components/MkUserCardMini.vue
View file

@ -50,7 +50,7 @@ onMounted(() => {
align-items: center; align-items: center;
padding: 16px; padding: 16px;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: var(--radius-sm);
> :global(.avatar) { > :global(.avatar) {
display: block; display: block;

2
packages/frontend/src/components/MkUserInfo.vue
View file

@ -100,7 +100,7 @@ defineProps<{
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: 6px; border-radius: var(--radius-sm);
} }
.description { .description {

8
packages/frontend/src/components/MkUserPopup.vue
View file

@ -146,7 +146,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: 6px; border-radius: var(--radius-sm);
} }
.locked:first-child { .locked:first-child {
@ -157,7 +157,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: 5px; border-radius: var(--radius-xs);
} }
.locked:not(:first-child) { .locked:not(:first-child) {
@ -168,7 +168,7 @@ onMounted(() => {
color: #fff; color: #fff;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
font-size: 0.7em; font-size: 0.7em;
border-radius: 5px; border-radius: var(--radius-xs);
} }
.avatarBack { .avatarBack {
@ -249,7 +249,7 @@ onMounted(() => {
right: 44px; right: 44px;
padding: 6px; padding: 6px;
background: var(--panel); background: var(--panel);
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
.follow { .follow {

2
packages/frontend/src/components/MkVisibilityPicker.vue
View file

@ -80,7 +80,7 @@ function choose(visibility: typeof Misskey.noteVisibilities[number]): void {
&.asDrawer { &.asDrawer {
padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0; padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
width: 100%; width: 100%;
border-radius: 24px; border-radius: var(--radius-lg);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;

2
packages/frontend/src/components/MkVisitorDashboard.vue
View file

@ -172,7 +172,7 @@ function exploreOtherServers() {
right: 16px; right: 16px;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 8px; border-radius: var(--radius-sm);
font-size: 18px; font-size: 18px;
} }

2
packages/frontend/src/components/MkWidgets.vue
View file

@ -162,7 +162,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
height: 32px; height: 32px;
color: #fff; color: #fff;
background: rgba(#000, 0.7); background: rgba(#000, 0.7);
border-radius: 4px; border-radius: var(--radius-xs);
} }
&Config { &Config {

4
packages/frontend/src/components/SkOldNoteWindow.vue
View file

@ -203,7 +203,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
font-size: 80%; font-size: 80%;
line-height: 1; line-height: 1;
border: solid 0.5px var(--divider); border: solid 0.5px var(--divider);
border-radius: 4px; border-radius: var(--radius-xs);
} }
.noteHeaderInfo { .noteHeaderInfo {
@ -264,7 +264,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.quoteNote { .quoteNote {
padding: 16px; padding: 16px;
border: dashed 1px var(--renote); border: dashed 1px var(--renote);
border-radius: 5px; border-radius: var(--radius-xs);
overflow: clip; overflow: clip;
} }

2
packages/frontend/src/components/form/link.vue
View file

@ -52,7 +52,7 @@ const props = defineProps<{
box-sizing: border-box; box-sizing: border-box;
padding: 10px 14px; padding: 10px 14px;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 6px; border-radius: var(--radius-sm);
font-size: 0.9em; font-size: 0.9em;
&:hover { &:hover {

4
packages/frontend/src/components/global/MkAd.vue
View file

@ -169,7 +169,7 @@ function reduceFrequency(): void {
display: block; display: block;
object-fit: contain; object-fit: contain;
margin: auto; margin: auto;
border-radius: 5px; border-radius: var(--radius-xs);
} }
.i { .i {
@ -179,7 +179,7 @@ function reduceFrequency(): void {
display: grid; display: grid;
place-content: center; place-content: center;
background: var(--panel); background: var(--panel);
border-radius: 100%; border-radius: var(--radius-full);
padding: 2px; padding: 2px;
} }

4
packages/frontend/src/components/global/MkAvatar.vue
View file

@ -159,7 +159,7 @@ watch(() => props.user.avatarBlurhash, () => {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
flex-shrink: 0; flex-shrink: 0;
border-radius: 100%; border-radius: var(--radius-full);
line-height: 16px; line-height: 16px;
} }
@ -169,7 +169,7 @@ watch(() => props.user.avatarBlurhash, () => {
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
border-radius: 100%; border-radius: var(--radius-full);
z-index: 1; z-index: 1;
overflow: clip; overflow: clip;
object-fit: cover; object-fit: cover;

2
packages/frontend/src/components/global/MkError.vue
View file

@ -44,6 +44,6 @@ const emit = defineEmits<{
width: 128px; width: 128px;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 16px; border-radius: var(--radius-md);
} }
</style> </style>

2
packages/frontend/src/components/global/MkPageHeader.tabs.vue
View file

@ -245,7 +245,7 @@ onUnmounted(() => {
bottom: 0; bottom: 0;
height: 3px; height: 3px;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: var(--radius-ellipse);
transition: none; transition: none;
pointer-events: none; pointer-events: none;

2
packages/frontend/src/components/global/MkPageHeader.vue
View file

@ -227,7 +227,7 @@ onUnmounted(() => {
width: calc(var(--height) - (var(--margin))); width: calc(var(--height) - (var(--margin)));
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: 5px; border-radius: var(--radius-xs);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);

2
packages/frontend/src/pages/_error_.vue
View file

@ -82,6 +82,6 @@ definePageMetadata({
vertical-align: bottom; vertical-align: bottom;
height: 128px; height: 128px;
margin-bottom: 24px; margin-bottom: 24px;
border-radius: 16px; border-radius: var(--radius-md);
} }
</style> </style>

10
packages/frontend/src/pages/about-sharkey.vue
View file

@ -220,7 +220,7 @@ definePageMetadata({
display: block; display: block;
width: 80px; width: 80px;
margin: 0 auto; margin: 0 auto;
border-radius: 16px; border-radius: var(--radius-md);
position: relative; position: relative;
z-index: 1; z-index: 1;
transform: translateX(-10%); transform: translateX(-10%);
@ -271,7 +271,7 @@ definePageMetadata({
align-items: center; align-items: center;
padding: 12px; padding: 12px;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 6px; border-radius: var(--radius-sm);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -286,7 +286,7 @@ definePageMetadata({
.contributorAvatar { .contributorAvatar {
width: 30px; width: 30px;
border-radius: 100%; border-radius: var(--radius-full);
} }
.contributorUsername { .contributorUsername {
@ -304,12 +304,12 @@ definePageMetadata({
align-items: center; align-items: center;
padding: 12px; padding: 12px;
background: var(--buttonBg); background: var(--buttonBg);
border-radius: 6px; border-radius: var(--radius-sm);
} }
.patronIcon { .patronIcon {
width: 24px; width: 24px;
border-radius: 100%; border-radius: var(--radius-full);
} }
.patronName { .patronName {

6
packages/frontend/src/pages/about.vue
View file

@ -168,7 +168,7 @@ definePageMetadata(computed(() => ({
<style lang="scss" module> <style lang="scss" module>
.banner { .banner {
text-align: center; text-align: center;
border-radius: 10px; border-radius: var(--radius);
overflow: clip; overflow: clip;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@ -178,7 +178,7 @@ definePageMetadata(computed(() => ({
display: block; display: block;
margin: 16px auto 0 auto; margin: 16px auto 0 auto;
height: 64px; height: 64px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
.bannerName { .bannerName {
@ -217,7 +217,7 @@ definePageMetadata(computed(() => ({
font-weight: bold; font-weight: bold;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
} }

4
packages/frontend/src/pages/admin-user.vue
View file

@ -546,7 +546,7 @@ definePageMetadata(computed(() => ({
> .suspended, > .silenced, > .moderator { > .suspended, > .silenced, > .moderator {
display: inline-block; display: inline-block;
border: solid 1px; border: solid 1px;
border-radius: 6px; border-radius: var(--radius-sm);
padding: 2px 6px; padding: 2px 6px;
font-size: 85%; font-size: 85%;
} }
@ -638,7 +638,7 @@ definePageMetadata(computed(() => ({
.announcementItem { .announcementItem {
display: flex; display: flex;
padding: 8px 12px; padding: 8px 12px;
border-radius: 6px; border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
} }
</style> </style>

4
packages/frontend/src/pages/admin/_header_.vue
View file

@ -181,7 +181,7 @@ onUnmounted(() => {
width: calc(var(--height) - (var(--margin) * 2)); width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
border-radius: 5px; border-radius: var(--radius-xs);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
@ -286,7 +286,7 @@ onUnmounted(() => {
bottom: 0; bottom: 0;
height: 3px; height: 3px;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: var(--radius-ellipse);
transition: all 0.2s ease; transition: all 0.2s ease;
pointer-events: none; pointer-events: none;
} }

2
packages/frontend/src/pages/admin/index.vue
View file

@ -369,7 +369,7 @@ defineExpose({
display: block; display: block;
margin: auto; margin: auto;
height: 42px; height: 42px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
} }
} }

2
packages/frontend/src/pages/admin/modlog.ModLog.vue
View file

@ -149,7 +149,7 @@ const props = defineProps<{
.diff { .diff {
background: #fff; background: #fff;
color: #000; color: #000;
border-radius: 6px; border-radius: var(--radius-sm);
overflow: clip; overflow: clip;
} }

2
packages/frontend/src/pages/admin/overview.federation.vue
View file

@ -146,7 +146,7 @@ onMounted(async () => {
margin-right: 12px; margin-right: 12px;
background: var(--accentedBg); background: var(--accentedBg);
color: var(--accent); color: var(--accent);
border-radius: 10px; border-radius: var(--radius);
} }
&.sub { &.sub {

2
packages/frontend/src/pages/admin/overview.stats.vue
View file

@ -115,7 +115,7 @@ onMounted(async () => {
margin-right: 12px; margin-right: 12px;
background: var(--accentedBg); background: var(--accentedBg);
color: var(--accent); color: var(--accent);
border-radius: 10px; border-radius: var(--radius);
} }
&.users { &.users {

4
packages/frontend/src/pages/admin/server-rules.vue
View file

@ -104,7 +104,7 @@ definePageMetadata({
height: 28px; height: 28px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: var(--radius-ellipse);
margin-right: 8px; margin-right: 8px;
} }
@ -119,7 +119,7 @@ definePageMetadata({
height: 40px; height: 40px;
color: var(--error); color: var(--error);
margin-left: auto; margin-left: auto;
border-radius: 6px; border-radius: var(--radius-sm);
&:hover { &:hover {
background: var(--X5); background: var(--X5);

2
packages/frontend/src/pages/antenna-timeline.vue
View file

@ -112,7 +112,7 @@ definePageMetadata(computed(() => antenna ? {
display: block; display: block;
margin: var(--margin) auto 0 auto; margin: var(--margin) auto 0 auto;
padding: 8px 16px; padding: 8px 16px;
border-radius: 32px; border-radius: var(--radius-xl);
} }
.tl { .tl {

4
packages/frontend/src/pages/channel.vue
View file

@ -267,7 +267,7 @@ definePageMetadata(computed(() => channel ? {
padding: 8px 12px; padding: 8px 12px;
font-size: 80%; font-size: 80%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
border-radius: 6px; border-radius: var(--radius-sm);
color: #fff; color: #fff;
} }
@ -282,7 +282,7 @@ definePageMetadata(computed(() => channel ? {
left: 16px; left: 16px;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: var(--warn); color: var(--warn);
border-radius: 6px; border-radius: var(--radius-sm);
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
padding: 4px 7px; padding: 4px 7px;

2
packages/frontend/src/pages/emoji-edit-dialog.vue
View file

@ -206,7 +206,7 @@ async function del() {
.imgContainer { .imgContainer {
padding: 8px; padding: 8px;
border-radius: 6px; border-radius: var(--radius-sm);
} }
.img { .img {

2
packages/frontend/src/pages/emojis.emoji.vue
View file

@ -61,7 +61,7 @@ function menu(ev) {
padding: 12px; padding: 12px;
text-align: left; text-align: left;
background: var(--panel); background: var(--panel);
border-radius: 8px; border-radius: var(--radius-sm);
&:hover { &:hover {
border-color: var(--accent); border-color: var(--accent);

2
packages/frontend/src/pages/follow-requests.vue
View file

@ -87,7 +87,7 @@ definePageMetadata(computed(() => ({
margin: 0 12px 0 0; margin: 0 12px 0 0;
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
> .body { > .body {

2
packages/frontend/src/pages/instance-info.vue
View file

@ -254,7 +254,7 @@ definePageMetadata({
display: block; display: block;
margin: 0 16px 0 0; margin: 0 16px 0 0;
height: 64px; height: 64px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
> .name { > .name {

2
packages/frontend/src/pages/invite.vue
View file

@ -114,6 +114,6 @@ definePageMetadata({
width: 128px; width: 128px;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 16px; border-radius: var(--radius-md);
} }
</style> </style>

2
packages/frontend/src/pages/list.vue
View file

@ -141,7 +141,7 @@ definePageMetadata(computed(() => list ? {
width: 128px; width: 128px;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 16px; border-radius: var(--radius-md);
} }
.button { .button {

2
packages/frontend/src/pages/my-antennas/index.vue
View file

@ -74,7 +74,7 @@ onActivated(() => {
display: block; display: block;
padding: 16px; padding: 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 6px; border-radius: var(--radius-sm);
&:hover { &:hover {
border: solid 1px var(--accent); border: solid 1px var(--accent);

2
packages/frontend/src/pages/my-lists/index.vue
View file

@ -84,7 +84,7 @@ onActivated(() => {
display: block; display: block;
padding: 16px; padding: 16px;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 6px; border-radius: var(--radius-sm);
margin-bottom: 8px; margin-bottom: 8px;
&:hover { &:hover {

2
packages/frontend/src/pages/note.vue
View file

@ -148,7 +148,7 @@ definePageMetadata(computed(() => note ? {
.loadPrev { .loadPrev {
min-width: 0; min-width: 0;
margin: 0 auto; margin: 0 auto;
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
.loadNext { .loadNext {

2
packages/frontend/src/pages/page-editor/page-editor.container.vue
View file

@ -63,7 +63,7 @@ function remove() {
overflow: hidden; overflow: hidden;
background: var(--panel); background: var(--panel);
border: solid 2px var(--X12); border: solid 2px var(--X12);
border-radius: 8px; border-radius: var(--radius-sm);
&:hover { &:hover {
border: solid 2px var(--X13); border: solid 2px var(--X13);

2
packages/frontend/src/pages/role.vue
View file

@ -104,7 +104,7 @@ definePageMetadata(computed(() => ({
width: 128px; width: 128px;
height: 128px; height: 128px;
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 16px; border-radius: var(--radius-md);
} }
</style> </style>

2
packages/frontend/src/pages/settings/apps.vue
View file

@ -93,7 +93,7 @@ definePageMetadata({
margin: 0 12px 0 0; margin: 0 12px 0 0;
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 8px; border-radius: var(--radius-sm);
} }
.appBody { .appBody {

2
packages/frontend/src/pages/settings/drive-cleaner.vue
View file

@ -152,7 +152,7 @@ definePageMetadata({
height: 12px; height: 12px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
overflow: clip; overflow: clip;
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
.meterValue { .meterValue {

4
packages/frontend/src/pages/settings/drive.vue
View file

@ -148,12 +148,12 @@ definePageMetadata({
.meter { .meter {
height: 10px; height: 10px;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
border-radius: 999px; border-radius: var(--radius-ellipse);
overflow: clip; overflow: clip;
} }
.meterValue { .meterValue {
height: 100%; height: 100%;
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
</style> </style>

2
packages/frontend/src/pages/settings/profile.vue
View file

@ -340,7 +340,7 @@ definePageMetadata({
background-size: cover; background-size: cover;
background-position: center; background-position: center;
border: solid 1px var(--divider); border: solid 1px var(--divider);
border-radius: 10px; border-radius: var(--radius);
overflow: clip; overflow: clip;
} }

2
packages/frontend/src/pages/settings/reaction.vue
View file

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<FromSlot> <FromSlot>
<template #label>{{ i18n.ts.reactionSettingDescription }}</template> <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"> <Sortable v-model="reactions" :class="$style.reactions" :itemKey="item => item" :animation="150" :delay="100" :delayOnTouchOnly="true">
<template #item="{element}"> <template #item="{element}">
<button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)"> <button class="_button" :class="$style.reactionsItem" @click="remove(element, $event)">

4
packages/frontend/src/pages/settings/theme.vue
View file

@ -172,7 +172,7 @@ definePageMetadata({
<style lang="scss" scoped> <style lang="scss" scoped>
.rfqxtzch { .rfqxtzch {
border-radius: 6px; border-radius: var(--radius-sm);
> .toggle { > .toggle {
position: relative; position: relative;
@ -246,7 +246,7 @@ definePageMetadata({
background-color: #E8CDA5; background-color: #E8CDA5;
opacity: 0; opacity: 0;
transition: opacity 200ms ease-in-out !important; transition: opacity 200ms ease-in-out !important;
border-radius: 100%; border-radius: var(--radius-full);
} }
.crater--1 { .crater--1 {

8
packages/frontend/src/pages/theme-editor.vue
View file

@ -244,7 +244,7 @@ definePageMetadata({
position: relative; position: relative;
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 8px; border-radius: var(--radius-sm);
> .preview { > .preview {
position: absolute; position: absolute;
@ -255,7 +255,7 @@ definePageMetadata({
margin: auto; margin: auto;
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 4px; border-radius: var(--radius-xs);
box-shadow: 0 2px 4px rgb(0 0 0 / 30%); box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
transition: transform 0.15s ease; transition: transform 0.15s ease;
} }
@ -271,10 +271,10 @@ definePageMetadata({
} }
&.rounded { &.rounded {
border-radius: 999px; border-radius: var(--radius-ellipse);
> .preview { > .preview {
border-radius: 999px; border-radius: var(--radius-ellipse);
} }
} }

2
packages/frontend/src/pages/timeline.vue
View file

@ -259,7 +259,7 @@ definePageMetadata(computed(() => ({
display: block; display: block;
margin: var(--margin) auto 0 auto; margin: var(--margin) auto 0 auto;
padding: 8px 16px; padding: 8px 16px;
border-radius: 32px; border-radius: var(--radius-xl);
} }
.postForm { .postForm {

Some files were not shown because too many files have changed in this diff Show more