mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-23 20:03:09 +02:00
fix(client): style tweak for ios
This commit is contained in:
parent
01688b543a
commit
e393ab6044
24 changed files with 37 additions and 36 deletions
|
@ -59,7 +59,7 @@ const isThumbnailAvailable = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
|
|
||||||
> .icon-sub {
|
> .icon-sub {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -189,7 +189,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
|
|
||||||
> .highlight {
|
> .highlight {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -76,7 +76,7 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
.wrap {
|
.wrap {
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -27,7 +27,7 @@ const props = defineProps<{
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
font-size: 0.95em;
|
font-size: 0.95em;
|
||||||
|
|
||||||
&.min-width_350px {
|
&.min-width_350px {
|
||||||
|
|
|
@ -36,7 +36,7 @@ const showContent = $ref(false);
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
font-size: 0.95em;
|
font-size: 0.95em;
|
||||||
|
|
||||||
&.min-width_350px {
|
&.min-width_350px {
|
||||||
|
|
|
@ -297,7 +297,7 @@ function readPromo() {
|
||||||
position: relative;
|
position: relative;
|
||||||
transition: box-shadow 0.1s ease;
|
transition: box-shadow 0.1s ease;
|
||||||
font-size: 1.05em;
|
font-size: 1.05em;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
contain: content;
|
contain: content;
|
||||||
|
|
||||||
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
|
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
|
||||||
|
|
|
@ -73,7 +73,7 @@ defineExpose({
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.meijqfqm {
|
.meijqfqm {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
|
|
|
@ -54,7 +54,7 @@ onMounted(() => {
|
||||||
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: 8px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
|
|
|
@ -148,7 +148,7 @@ export default defineComponent({
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: var(--buttonBg);
|
background: var(--buttonBg);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: background 0.1s ease;
|
transition: background 0.1s ease;
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<transition :name="$store.state.animation ? 'container-toggle' : ''"
|
<transition
|
||||||
|
:name="$store.state.animation ? 'container-toggle' : ''"
|
||||||
@enter="enter"
|
@enter="enter"
|
||||||
@after-enter="afterEnter"
|
@after-enter="afterEnter"
|
||||||
@leave="leave"
|
@leave="leave"
|
||||||
|
@ -34,37 +35,37 @@ export default defineComponent({
|
||||||
showHeader: {
|
showHeader: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
thin: {
|
thin: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
naked: {
|
naked: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
foldable: {
|
foldable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
expanded: {
|
expanded: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: true
|
default: true,
|
||||||
},
|
},
|
||||||
scrollable: {
|
scrollable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: false,
|
required: false,
|
||||||
default: false
|
default: false,
|
||||||
},
|
},
|
||||||
maxHeight: {
|
maxHeight: {
|
||||||
type: Number,
|
type: Number,
|
||||||
required: false,
|
required: false,
|
||||||
default: null
|
default: null,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -79,12 +80,12 @@ export default defineComponent({
|
||||||
const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
|
const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
|
||||||
this.$el.style.minHeight = `${headerHeight}px`;
|
this.$el.style.minHeight = `${headerHeight}px`;
|
||||||
if (showBody) {
|
if (showBody) {
|
||||||
this.$el.style.flexBasis = `auto`;
|
this.$el.style.flexBasis = 'auto';
|
||||||
} else {
|
} else {
|
||||||
this.$el.style.flexBasis = `${headerHeight}px`;
|
this.$el.style.flexBasis = `${headerHeight}px`;
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
immediate: true
|
immediate: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
|
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
|
||||||
|
@ -124,7 +125,7 @@ export default defineComponent({
|
||||||
afterLeave(el) {
|
afterLeave(el) {
|
||||||
el.style.height = null;
|
el.style.height = null;
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -142,7 +143,7 @@ export default defineComponent({
|
||||||
|
|
||||||
.ukygtjoj {
|
.ukygtjoj {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
|
|
||||||
&.naked {
|
&.naked {
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
|
|
|
@ -389,7 +389,7 @@ defineExpose({
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
|
|
||||||
> .content {
|
> .content {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||||
<div style="overflow: clip;">
|
<div style="overflow: hidden; overflow: clip;">
|
||||||
<MkSpacer :content-max="600" :margin-min="20">
|
<MkSpacer :content-max="600" :margin-min="20">
|
||||||
<div class="_formRoot znqjceqz">
|
<div class="_formRoot znqjceqz">
|
||||||
<div id="debug"></div>
|
<div id="debug"></div>
|
||||||
|
|
|
@ -138,7 +138,7 @@ definePageMetadata(computed(() => ({
|
||||||
.fwhjspax {
|
.fwhjspax {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
|
|
||||||
|
|
|
@ -561,7 +561,7 @@ definePageMetadata({
|
||||||
> .body {
|
> .body {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -620,7 +620,7 @@ definePageMetadata({
|
||||||
> .body {
|
> .body {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -110,7 +110,7 @@ definePageMetadata(computed(() => antenna ? {
|
||||||
> .tl {
|
> .tl {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.min-width_800px {
|
&.min-width_800px {
|
||||||
|
|
|
@ -192,7 +192,7 @@ definePageMetadata({
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
|
|
||||||
> .avatar {
|
> .avatar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -175,7 +175,7 @@ definePageMetadata({
|
||||||
> .toggleWrapper {
|
> .toggleWrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
padding: 0 100px;
|
padding: 0 100px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
|
|
@ -177,7 +177,7 @@ definePageMetadata(computed(() => ({
|
||||||
> .tl {
|
> .tl {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -103,7 +103,7 @@ definePageMetadata(computed(() => list ? {
|
||||||
> .tl {
|
> .tl {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.min-width_800px {
|
&.min-width_800px {
|
||||||
|
|
|
@ -90,7 +90,7 @@ export default defineComponent({
|
||||||
> .img {
|
> .img {
|
||||||
height: 128px;
|
height: 128px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -275,7 +275,7 @@ function showMenu(ev) {
|
||||||
-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: 999px;
|
border-radius: 999px;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
|
|
||||||
|
|
|
@ -260,7 +260,7 @@ hr {
|
||||||
._panel {
|
._panel {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
._block {
|
._block {
|
||||||
|
|
|
@ -52,7 +52,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: var(--height);
|
line-height: var(--height);
|
||||||
height: var(--height);
|
height: var(--height);
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
||||||
> .name {
|
> .name {
|
||||||
|
|
|
@ -241,7 +241,7 @@ onMounted(() => {
|
||||||
border-left: solid 1px var(--divider);
|
border-left: solid 1px var(--divider);
|
||||||
border-right: solid 1px var(--divider);
|
border-right: solid 1px var(--divider);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: clip;
|
overflow: hidden; overflow: clip;
|
||||||
--margin: 12px;
|
--margin: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue