🎨

src/client/app/common/views/widgets/calendar.vue

@@ -1,9 +1,7 @@
 <template>
-<div class="mkw-calendar"
-	:data-melt="props.design == 1"
-	:data-special="special"
-	:data-mobile="isMobile"
->
+<div class="mkw-calendar" :data-special="special" :data-mobile="isMobile">
+	<mk-widget-container :naked="props.design == 1" :show-header="false">
+		<div class="mkw-calendar--body">
 			<div class="calendar" :data-is-holiday="isHoliday">
 				<p class="month-and-year">
 					<span class="year">{{ year }}年</span>
@@ -33,6 +31,8 @@
 				</div>
 			</div>
 		</div>
+	</mk-widget-container>
+</div>
 </template>
 
 <script lang="ts">
@@ -111,23 +111,12 @@ export default define({
 @import '~const.styl'
 
 root(isDark)
-	padding 16px 0
-	color isDark ? #c5ced6 :#777
-	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
-
 	&[data-special='on-new-years-day']
 		border-color #ef95a0
 
-	&[data-melt]
-		background transparent
-		border none
-
-	&[data-mobile]
-		border none
-		border-radius 8px
-		box-shadow 0 0 0 1px rgba(#000, 0.2)
+	.mkw-calendar--body
+		padding 16px 0
+		color isDark ? #c5ced6 : #777
 
 		&:after
 			content ""

src/client/app/mobile/views/components/widget-container.vue

@@ -35,6 +35,9 @@ root(isDark)
 		background transparent !important
 		box-shadow none !important
 
+	&.hideHeader
+		background isDark ? #21242f : #fff
+
 	> header
 		> .title
 			margin 0

src/client/app/mobile/views/pages/widgets.vue

@@ -143,6 +143,7 @@ main
 	margin 0 auto
 	padding 8px
 	max-width 500px
+	width 100%
 
 	@media (min-width 500px)
 		padding 16px 8px