prototype: decreased rounding

This commit is contained in:
Insert5StarName 2023-10-01 01:20:20 +02:00
parent a782aa5b0e
commit 7a51e2d404
93 changed files with 142 additions and 142 deletions

View file

@ -84,7 +84,7 @@ function resolve() {
box-sizing: border-box;
align-items: center;
padding: 14px;
border-radius: 8px;
border-radius: 5px;
--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-size: 16px 16px;

View file

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

View file

@ -154,7 +154,7 @@ function onMousedown(evt: MouseEvent): void {
}
&.rounded {
border-radius: 999px;
border-radius: 4px;
}
&.primary {
@ -264,7 +264,7 @@ function onMousedown(evt: MouseEvent): void {
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
border-radius: 5px;
overflow: clip;
pointer-events: none;
}

View file

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

View file

@ -55,7 +55,7 @@ defineExpose({
font-size: 85%;
padding: 4px 12px 4px 8px;
border: solid 1px var(--divider);
border-radius: 999px;
border-radius: 4px;
&:hover {
border-color: var(--inputBorderHover);

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -139,7 +139,7 @@ onMounted(() => {
background: var(--buttonBg);
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-radius: 6px;
border-radius: 5px;
transition: border-radius 0.3s;
&:hover {

View file

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

View file

@ -46,7 +46,7 @@ function getInstanceIcon(instance): string {
align-items: center;
padding: 16px;
background: var(--panel);
border-radius: 8px;
border-radius: 5px;
> :global(.icon) {
display: block;

View file

@ -74,7 +74,7 @@ function close() {
overflow: auto;
overscroll-behavior: contain;
text-align: left;
border-radius: 16px;
border-radius: 4px;
&.asDrawer {
width: 100%;
@ -97,7 +97,7 @@ function close() {
justify-content: center;
vertical-align: bottom;
height: 100px;
border-radius: 10px;
border-radius: 5px;
&:hover {
color: var(--accent);

View file

@ -82,7 +82,7 @@ onMounted(() => {
}
.audio {
border-radius: 8px;
border-radius: 5px;
overflow: clip;
}
</style>

View file

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

View file

@ -341,7 +341,7 @@ const previewable = (file: Misskey.entities.DriveFile): boolean => {
.media {
overflow: hidden; // clip
border-radius: 8px;
border-radius: 5px;
}
:global(.pswp) {

View file

@ -68,7 +68,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
.hide {
display: block;
position: absolute;
border-radius: 6px;
border-radius: 5px;
background-color: black;
color: var(--accentLighten);
font-size: 14px;
@ -118,7 +118,7 @@ const hide = ref((defaultStore.state.nsfw === 'force' || defaultStore.state.enab
.indicator {
/* Hardcode to black because either --bg or --fg makes it hard to read in dark/light mode */
background-color: black;
border-radius: 6px;
border-radius: 5px;
color: var(--accentLighten);
display: inline-block;
font-weight: bold;

View file

@ -43,7 +43,7 @@ const bgCss = bg.toRgbString();
.root {
display: inline-block;
padding: 4px 8px 4px 4px;
border-radius: 999px;
border-radius: 4px;
color: var(--mention);
&.isMe {

View file

@ -288,7 +288,7 @@ onBeforeUnmount(() => {
margin: auto;
width: calc(100% - 16px);
height: 100%;
border-radius: 6px;
border-radius: 5px;
}
&:not(:disabled):hover {

View file

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

View file

@ -552,7 +552,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
width: 28px;
height: 28px;
margin: 0 8px 0 0;
border-radius: 6px;
border-radius: 5px;
}
.renoteText {
@ -679,7 +679,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
border-radius: 8px;
border-radius: 5px;
overflow: clip;
}
@ -757,7 +757,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.reactionTab {
padding: 4px 6px;
border: solid 1px var(--divider);
border-radius: 6px;
border-radius: 5px;
}
.reactionTabActive {

View file

@ -50,7 +50,7 @@ const showContent = $ref(false);
margin: 0 10px 0 0;
width: 34px;
height: 34px;
border-radius: 8px;
border-radius: 5px;
position: sticky !important;
top: calc(16px + var(--stickyTop, 0px));
left: 0;

View file

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

View file

@ -181,7 +181,7 @@ useTooltip(reactionRef, (showing) => {
display: block;
width: 100%;
height: 100%;
border-radius: 6px;
border-radius: 5px;
}
.subIcon {

View file

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

View file

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

View file

@ -55,7 +55,7 @@ function toggle(): void {
background-color: var(--panel);
background-clip: padding-box !important;
border: solid 1px var(--panel);
border-radius: 6px;
border-radius: 5px;
font-size: 90%;
transition: all 0.2s;
user-select: none;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -59,7 +59,7 @@ defineProps<{
width: 100%;
box-sizing: border-box;
padding: 9px 16px 9px 8px;
border-radius: 9px;
border-radius: 5px;
font-size: 0.9em;
&:hover {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -145,7 +145,7 @@ onMounted(() => {
color: #fff;
background: rgba(0, 0, 0, 0.7);
font-size: 0.7em;
border-radius: 6px;
border-radius: 5px;
}
.avatarBack {
@ -226,7 +226,7 @@ onMounted(() => {
right: 44px;
padding: 6px;
background: var(--panel);
border-radius: 999px;
border-radius: 4px;
}
.follow {

View file

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

View file

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

View file

@ -142,10 +142,10 @@ watch(() => props.user.avatarBlurhash, () => {
}
.square {
border-radius: 20%;
border-radius: 5px;
> .inner {
border-radius: 20%;
border-radius: 5px;
}
}

View file

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

View file

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