wip
This commit is contained in:
syuilo
parent
933638d035
commit
f31c94e2ea
15 changed files with 29 additions and 71 deletions
|
|
@ -975,17 +975,18 @@ export default Vue.extend({
|
|||
> main {
|
||||
width: $main-width;
|
||||
min-width: $main-width;
|
||||
box-shadow: 1px 0 0 0 var(--shadow), -1px 0 0 0 var(--shadow);
|
||||
|
||||
@media (max-width: $side-hide-threshold) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .content {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 8px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1023,6 +1024,7 @@ export default Vue.extend({
|
|||
|
||||
> .widgets {
|
||||
box-sizing: border-box;
|
||||
margin-left: var(--margin);
|
||||
|
||||
@media (max-width: $side-hide-threshold) {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -76,10 +76,6 @@ export default Vue.extend({
|
|||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
> .list-enter-active {
|
||||
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
|
||||
&[data-direction="up"] {
|
||||
> .list-enter {
|
||||
opacity: 0;
|
||||
|
|
@ -109,8 +105,6 @@ export default Vue.extend({
|
|||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
border-radius: 64px;
|
||||
background: var(--dateLabelBg);
|
||||
color: var(--dateLabelFg);
|
||||
|
||||
> span {
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@ export default Vue.extend({
|
|||
&.max-width_500px {
|
||||
> .notes {
|
||||
> ::v-deep *:not(:last-child) {
|
||||
margin-bottom: var(--marginHalf);
|
||||
//margin-bottom: var(--marginHalf);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="mk-notifications" :class="{ page }">
|
||||
<div class="mk-notifications">
|
||||
<x-list class="notifications" :items="items" v-slot="{ item: notification }">
|
||||
<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" :key="notification.id"/>
|
||||
<x-notification v-else :notification="notification" :with-time="true" :full="true" class="notification" :class="{ _panel: page }" :key="notification.id"/>
|
||||
<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
|
||||
</x-list>
|
||||
|
||||
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
|
||||
|
|
@ -43,11 +43,6 @@ export default Vue.extend({
|
|||
type: String,
|
||||
required: false
|
||||
},
|
||||
page: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -94,25 +89,10 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.mk-notifications {
|
||||
&.page {
|
||||
> .notifications {
|
||||
> ::v-deep * {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.page) {
|
||||
> .notifications {
|
||||
> ::v-deep * {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .notification {
|
||||
background: var(--panel);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
//margin-bottom: var(--margin);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
:initial-note="initialNote"
|
||||
:instant="instant"
|
||||
@posted="onPosted"
|
||||
@cancel="onCanceled"/>
|
||||
@cancel="onCanceled"
|
||||
style="border-radius: var(--radius);"/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -586,7 +586,6 @@ export default Vue.extend({
|
|||
<style lang="scss" scoped>
|
||||
.gafaadew {
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
|
||||
> header {
|
||||
z-index: 1000;
|
||||
|
|
|
|||
|
|
@ -124,7 +124,6 @@ export default Vue.extend({
|
|||
&.primary {
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 6px 16px var(--accentShadow);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--jkhztclx);
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export default Vue.extend({
|
|||
> header {
|
||||
position: relative;
|
||||
box-shadow: 0 1px 0 0 var(--divider);
|
||||
z-index: 1;
|
||||
|
||||
> .title {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -287,7 +287,6 @@ export default Vue.extend({
|
|||
|
||||
> .balloon {
|
||||
background: $me-balloon-color;
|
||||
box-shadow: 0 6px 16px var(--accentShadow);
|
||||
text-align: left;
|
||||
|
||||
&[data-no-text] {
|
||||
|
|
|
|||
|
|
@ -230,7 +230,6 @@ hr {
|
|||
@extend ._button;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 6px 16px var(--accentShadow);
|
||||
|
||||
&:not(:disabled):hover {
|
||||
background: var(--jkhztclx);
|
||||
|
|
@ -276,25 +275,22 @@ hr {
|
|||
}
|
||||
}
|
||||
|
||||
._shadow {
|
||||
box-shadow: 0 8px 32px var(--shadow);
|
||||
|
||||
@media (max-width: 700px) {
|
||||
box-shadow: 0 4px 16px var(--shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
box-shadow: 0 2px 8px var(--shadow);
|
||||
}
|
||||
}
|
||||
|
||||
._panel {
|
||||
@extend ._shadow;
|
||||
position: relative;
|
||||
background: var(--panel);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
main ._panel {
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
|
||||
}
|
||||
|
||||
._panel ._panel {
|
||||
border-radius: 0;
|
||||
box-shadow: 0 1px 0 0 var(--shadow), 0 -1px 0 0 var(--shadow);
|
||||
}
|
||||
|
||||
._card {
|
||||
@extend ._panel;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,8 +33,7 @@
|
|||
divider: 'rgba(255, 255, 255, 0.1)',
|
||||
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
dateLabelBg: 'rgba(255, 255, 255, 0.08)',
|
||||
dateLabelFg: '#fff',
|
||||
dateLabelFg: '@fg',
|
||||
infoBg: '#253142',
|
||||
infoFg: '#fff',
|
||||
infoWarnBg: '#42321c',
|
||||
|
|
|
|||
|
|
@ -33,8 +33,7 @@
|
|||
divider: 'rgba(0, 0, 0, 0.1)',
|
||||
scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
|
||||
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
|
||||
dateLabelBg: 'rgba(0, 0, 0, 0.5)',
|
||||
dateLabelFg: '#fff',
|
||||
dateLabelFg: '@fg',
|
||||
infoBg: '#e5f5ff',
|
||||
infoFg: '#72818a',
|
||||
infoWarnBg: '#fff0db',
|
||||
|
|
|
|||
|
|
@ -14,6 +14,5 @@
|
|||
link: '@accent',
|
||||
mention: '@accent',
|
||||
hashtag: '@accent',
|
||||
dateLabelBg: 'rgb(204, 186, 188)',
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<mk-container :show-header="!props.compact" class="container">
|
||||
<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
|
||||
|
||||
<div class="tl">
|
||||
<div>
|
||||
<x-notifications/>
|
||||
</div>
|
||||
</mk-container>
|
||||
|
|
@ -81,10 +81,5 @@ export default define({
|
|||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tl {
|
||||
background: var(--bg);
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
</button>
|
||||
</template>
|
||||
|
||||
<div class="tl">
|
||||
<div>
|
||||
<x-timeline :key="props.src === 'list' ? `list:${props.list.id}` : props.src === 'antenna' ? `antenna:${props.antenna.id}` : props.src" :src="props.src" :list="props.list" :antenna="props.antenna"/>
|
||||
</div>
|
||||
</mk-container>
|
||||
|
|
@ -148,11 +148,5 @@ export default define({
|
|||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tl {
|
||||
padding: 8px;
|
||||
background: var(--bg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue