:art:

3 files changed, 91 insertions, 98 deletions

diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index 41e9253784..0e9714960a 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -1,37 +1,37 @@
 <template>
-<div class="mkw-calendar"
-	:data-melt="props.design == 1"
-	:data-special="special"
-	:data-mobile="isMobile"
->
-	<div class="calendar" :data-is-holiday="isHoliday">
-		<p class="month-and-year">
-			<span class="year">{{ year }}年</span>
-			<span class="month">{{ month }}月</span>
-		</p>
-		<p class="day">{{ day }}日</p>
-		<p class="week-day">{{ weekDay }}曜日</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>今日:<b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
+<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>
+					<span class="month">{{ month }}月</span>
+				</p>
+				<p class="day">{{ day }}日</p>
+				<p class="week-day">{{ weekDay }}曜日</p>
 			</div>
-		</div>
-		<div>
-			<p>今月:<b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
-			</div>
-		</div>
-		<div>
-			<p>今年:<b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
+			<div class="info">
+				<div>
+					<p>今日:<b>{{ dayP.toFixed(1) }}%</b></p>
+					<div class="meter">
+						<div class="val" :style="{ width: `${dayP}%` }"></div>
+					</div>
+				</div>
+				<div>
+					<p>今月:<b>{{ monthP.toFixed(1) }}%</b></p>
+					<div class="meter">
+						<div class="val" :style="{ width: `${monthP}%` }"></div>
+					</div>
+				</div>
+				<div>
+					<p>今年:<b>{{ yearP.toFixed(1) }}%</b></p>
+					<div class="meter">
+						<div class="val" :style="{ width: `${yearP}%` }"></div>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -111,93 +111,82 @@ 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 ""
-		display block
-		clear both
+		&:after
+			content ""
+			display block
+			clear both
 
-	> .calendar
-		float left
-		width 60%
-		text-align center
+		> .calendar
+			float left
+			width 60%
+			text-align center
 
-		&[data-is-holiday]
-			> .day
-				color #ef95a0
+			&[data-is-holiday]
+				> .day
+					color #ef95a0
 
-		> p
-			margin 0
-			line-height 18px
-			font-size 14px
+			> p
+				margin 0
+				line-height 18px
+				font-size 14px
 
-			> span
-				margin 0 4px
+				> span
+					margin 0 4px
 
-		> .day
-			margin 10px 0
-			line-height 32px
-			font-size 28px
+			> .day
+				margin 10px 0
+				line-height 32px
+				font-size 28px
 
-	> .info
-		display block
-		float left
-		width 40%
-		padding 0 16px 0 0
+		> .info
+			display block
+			float left
+			width 40%
+			padding 0 16px 0 0
 
-		> div
-			margin-bottom 8px
+			> div
+				margin-bottom 8px
 
-			&:last-child
-				margin-bottom 4px
+				&:last-child
+					margin-bottom 4px
 
-			> p
-				margin 0 0 2px 0
-				font-size 12px
-				line-height 18px
-				color isDark ? #7a8692 : #888
+				> p
+					margin 0 0 2px 0
+					font-size 12px
+					line-height 18px
+					color isDark ? #7a8692 : #888
 
-				> b
-					margin-left 2px
+					> b
+						margin-left 2px
 
-			> .meter
-				width 100%
-				overflow hidden
-				background isDark ? #1c1f25 : #eee
-				border-radius 8px
+				> .meter
+					width 100%
+					overflow hidden
+					background isDark ? #1c1f25 : #eee
+					border-radius 8px
 
-				> .val
-					height 4px
-					background $theme-color
+					> .val
+						height 4px
+						background $theme-color
 
-			&:nth-child(1)
-				> .meter > .val
-					background #f7796c
+				&:nth-child(1)
+					> .meter > .val
+						background #f7796c
 
-			&:nth-child(2)
-				> .meter > .val
-					background #a1de41
+				&:nth-child(2)
+					> .meter > .val
+						background #a1de41
 
-			&:nth-child(3)
-				> .meter > .val
-					background #41ddde
+				&:nth-child(3)
+					> .meter > .val
+						background #41ddde
 
 .mkw-calendar[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index 8a97848b73..a713a10621 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/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
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index b4022fd58f..509ce16eef 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/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