monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

wip

Browse source
This commit is contained in:
syuilo 2020-03-20 18:11:39 +09:00
parent 933638d035
commit f31c94e2ea
15 changed files with 29 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/client/app.vue
View file

@ -975,17 +975,18 @@ export default Vue.extend({
> main { > main {
width: $main-width; width: $main-width;
min-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) { @media (max-width: $side-hide-threshold) {
min-width: 0; min-width: 0;
} }
> .content { > .content {
padding: 16px; padding: 16px 0;
box-sizing: border-box; box-sizing: border-box;
@media (max-width: 500px) { @media (max-width: 500px) {
padding: 8px; padding: 8px 0;
} }
} }
@ -1023,6 +1024,7 @@ export default Vue.extend({
> .widgets { > .widgets {
box-sizing: border-box; box-sizing: border-box;
margin-left: var(--margin);
@media (max-width: $side-hide-threshold) { @media (max-width: $side-hide-threshold) {
display: none; display: none;

6
src/client/components/date-separated-list.vue
View file

@ -76,10 +76,6 @@ export default Vue.extend({
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); 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"] { &[data-direction="up"] {
> .list-enter { > .list-enter {
opacity: 0; opacity: 0;
@ -109,8 +105,6 @@ export default Vue.extend({
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
border-radius: 64px;
background: var(--dateLabelBg);
color: var(--dateLabelFg); color: var(--dateLabelFg);
> span { > span {

3
src/client/components/notes.vue
View file

@ -111,7 +111,8 @@ export default Vue.extend({
&.max-width_500px { &.max-width_500px {
> .notes { > .notes {
> ::v-deep *:not(:last-child) { > ::v-deep *:not(:last-child) {
margin-bottom: var(--marginHalf); //margin-bottom: var(--marginHalf);
margin-bottom: 0;
} }
} }
} }

28
src/client/components/notifications.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="mk-notifications" :class="{ page }"> <div class="mk-notifications">
<x-list class="notifications" :items="items" v-slot="{ item: notification }"> <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-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> </x-list>
<button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching"> <button class="more _button" v-if="more" @click="fetchMore" :disabled="moreFetching">
@ -43,11 +43,6 @@ export default Vue.extend({
type: String, type: String,
required: false required: false
}, },
page: {
type: Boolean,
required: false,
default: false
}
}, },
data() { data() {
@ -94,25 +89,10 @@ export default Vue.extend({
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-notifications { .mk-notifications {
&.page {
> .notifications { > .notifications {
> ::v-deep * { > ::v-deep * {
margin-bottom: var(--margin); //margin-bottom: var(--margin);
} margin-bottom: 0;
}
}
&: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);
}
} }
} }

3
src/client/components/post-form-dialog.vue
View file

@ -17,7 +17,8 @@
:initial-note="initialNote" :initial-note="initialNote"
:instant="instant" :instant="instant"
@posted="onPosted" @posted="onPosted"
@cancel="onCanceled"/> @cancel="onCanceled"
style="border-radius: var(--radius);"/>
</transition> </transition>
</div> </div>
</div> </div>

1
src/client/components/post-form.vue
View file

@ -586,7 +586,6 @@ export default Vue.extend({
<style lang="scss" scoped> <style lang="scss" scoped>
.gafaadew { .gafaadew {
background: var(--panel); background: var(--panel);
border-radius: var(--radius);
> header { > header {
z-index: 1000; z-index: 1000;

1
src/client/components/ui/button.vue
View file

@ -124,7 +124,6 @@ export default Vue.extend({
&.primary { &.primary {
color: #fff; color: #fff;
background: var(--accent); background: var(--accent);
box-shadow: 0 6px 16px var(--accentShadow);
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--jkhztclx); background: var(--jkhztclx);

1
src/client/components/ui/container.vue
View file

@ -110,6 +110,7 @@ export default Vue.extend({
> header { > header {
position: relative; position: relative;
box-shadow: 0 1px 0 0 var(--divider); box-shadow: 0 1px 0 0 var(--divider);
z-index: 1;
> .title { > .title {
margin: 0; margin: 0;

1
src/client/pages/messaging-room.message.vue
View file

@ -287,7 +287,6 @@ export default Vue.extend({
> .balloon { > .balloon {
background: $me-balloon-color; background: $me-balloon-color;
box-shadow: 0 6px 16px var(--accentShadow);
text-align: left; text-align: left;
&[data-no-text] { &[data-no-text] {

24
src/client/style.scss
View file

@ -230,7 +230,6 @@ hr {
@extend ._button; @extend ._button;
color: #fff; color: #fff;
background: var(--accent); background: var(--accent);
box-shadow: 0 6px 16px var(--accentShadow);
&:not(:disabled):hover { &:not(:disabled):hover {
background: var(--jkhztclx); 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 { ._panel {
@extend ._shadow;
position: relative; position: relative;
background: var(--panel); background: var(--panel);
border-radius: var(--radius); 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 { ._card {
@extend ._panel; @extend ._panel;

3
src/client/themes/_dark.json5
View file

@ -33,8 +33,7 @@
divider: 'rgba(255, 255, 255, 0.1)', divider: 'rgba(255, 255, 255, 0.1)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)', scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
dateLabelBg: 'rgba(255, 255, 255, 0.08)', dateLabelFg: '@fg',
dateLabelFg: '#fff',
infoBg: '#253142', infoBg: '#253142',
infoFg: '#fff', infoFg: '#fff',
infoWarnBg: '#42321c', infoWarnBg: '#42321c',

3
src/client/themes/_light.json5
View file

@ -33,8 +33,7 @@
divider: 'rgba(0, 0, 0, 0.1)', divider: 'rgba(0, 0, 0, 0.1)',
scrollbarHandle: 'rgba(0, 0, 0, 0.2)', scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)', scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
dateLabelBg: 'rgba(0, 0, 0, 0.5)', dateLabelFg: '@fg',
dateLabelFg: '#fff',
infoBg: '#e5f5ff', infoBg: '#e5f5ff',
infoFg: '#72818a', infoFg: '#72818a',
infoWarnBg: '#fff0db', infoWarnBg: '#fff0db',

1
src/client/themes/lavender.json5
View file

@ -14,6 +14,5 @@
link: '@accent', link: '@accent',
mention: '@accent', mention: '@accent',
hashtag: '@accent', hashtag: '@accent',
dateLabelBg: 'rgb(204, 186, 188)',
}, },
} }

7
src/client/widgets/notifications.vue
View file

@ -3,7 +3,7 @@
<mk-container :show-header="!props.compact" class="container"> <mk-container :show-header="!props.compact" class="container">
<template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template> <template #header><fa :icon="faBell"/>{{ $t('notifications') }}</template>
<div class="tl"> <div>
<x-notifications/> <x-notifications/>
</div> </div>
</mk-container> </mk-container>
@ -81,10 +81,5 @@ export default define({
flex-grow: 1; flex-grow: 1;
} }
} }
.tl {
background: var(--bg);
padding: 8px;
}
} }
</style> </style>

8
src/client/widgets/timeline.vue
View file

@ -14,7 +14,7 @@
</button> </button>
</template> </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"/> <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> </div>
</mk-container> </mk-container>
@ -148,11 +148,5 @@ export default define({
flex-grow: 1; flex-grow: 1;
} }
} }
.tl {
padding: 8px;
background: var(--bg);
box-sizing: border-box;
}
} }
</style> </style>