From f31c94e2ea43fa36d2a0fc8742e0a52a0025b643 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 18:11:39 +0900
Subject: [PATCH] wip
---
src/client/app.vue | 6 ++--
src/client/components/date-separated-list.vue | 6 ----
src/client/components/notes.vue | 3 +-
src/client/components/notifications.vue | 32 ++++---------------
src/client/components/post-form-dialog.vue | 3 +-
src/client/components/post-form.vue | 1 -
src/client/components/ui/button.vue | 1 -
src/client/components/ui/container.vue | 1 +
src/client/pages/messaging-room.message.vue | 1 -
src/client/style.scss | 24 ++++++--------
src/client/themes/_dark.json5 | 3 +-
src/client/themes/_light.json5 | 3 +-
src/client/themes/lavender.json5 | 1 -
src/client/widgets/notifications.vue | 7 +---
src/client/widgets/timeline.vue | 8 +----
15 files changed, 29 insertions(+), 71 deletions(-)
diff --git a/src/client/app.vue b/src/client/app.vue
index 48df0b9aa..df571f824 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -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;
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index 53fd0a7c7..10f6dea51 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -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 {
diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index dc93c1f6c..9bbde6293 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -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;
}
}
}
diff --git a/src/client/components/notifications.vue b/src/client/components/notifications.vue
index ff6d63821..f090dc6bc 100644
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -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);
- }
+ > .notifications {
+ > ::v-deep * {
+ //margin-bottom: var(--margin);
+ margin-bottom: 0;
}
}
diff --git a/src/client/components/post-form-dialog.vue b/src/client/components/post-form-dialog.vue
index b6531474c..9cb527af2 100644
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -17,7 +17,8 @@
:initial-note="initialNote"
:instant="instant"
@posted="onPosted"
- @cancel="onCanceled"/>
+ @cancel="onCanceled"
+ style="border-radius: var(--radius);"/>
</transition>
</div>
</div>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 2d35cfe16..7b84938d5 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -586,7 +586,6 @@ export default Vue.extend({
<style lang="scss" scoped>
.gafaadew {
background: var(--panel);
- border-radius: var(--radius);
> header {
z-index: 1000;
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index 5264224c1..15289c820 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -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);
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue
index 4e7c9420a..9d5abdf2d 100644
--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -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;
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging-room.message.vue
index 48de2c7cd..a520306f2 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging-room.message.vue
@@ -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] {
diff --git a/src/client/style.scss b/src/client/style.scss
index 93d4159d4..2d80e6f6f 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -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;
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 5f30d2141..db4813d8b 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -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',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 2b411fb28..ead162011 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -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',
diff --git a/src/client/themes/lavender.json5 b/src/client/themes/lavender.json5
index 4eb4a5474..faa409361 100644
--- a/src/client/themes/lavender.json5
+++ b/src/client/themes/lavender.json5
@@ -14,6 +14,5 @@
link: '@accent',
mention: '@accent',
hashtag: '@accent',
- dateLabelBg: 'rgb(204, 186, 188)',
},
}
diff --git a/src/client/widgets/notifications.vue b/src/client/widgets/notifications.vue
index 2a718a666..9c1bddb2e 100644
--- a/src/client/widgets/notifications.vue
+++ b/src/client/widgets/notifications.vue
@@ -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>
diff --git a/src/client/widgets/timeline.vue b/src/client/widgets/timeline.vue
index ab5664a4d..55f78f985 100644
--- a/src/client/widgets/timeline.vue
+++ b/src/client/widgets/timeline.vue
@@ -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>