nanka iroiro

src/client/app/common/views/components/ui/card.vue

@@ -24,19 +24,34 @@ export default Vue.extend({
 
 root(isDark)
 	margin 16px
-	padding 16px
 	color isDark ? #fff : #000
 	background isDark ? #282C37 : #fff
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
-	@media (min-width 500px)
-		padding 32px
-
 	> header
-		font-weight normal
-		font-size 24px
+		padding 16px
+		font-weight bold
+		font-size 20px
 		color isDark ? #fff : #444
 
+		@media (min-width 500px)
+			padding 24px 32px
+
+	> section
+		padding 20px 16px
+		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+
+		@media (min-width 500px)
+			padding 32px
+
+		&.fit-top
+			padding-top 0
+
+		> header
+			margin-bottom 16px
+			font-weight bold
+			color isDark ? #fff : #444
+
 .ui-card[data-darkmode]
 	root(true)
 

src/client/app/common/views/components/ui/radio.vue

@@ -55,7 +55,7 @@ export default Vue.extend({
 
 root(isDark)
 	display inline-block
-	margin 32px 32px 32px 0
+	margin 0 32px 0 0
 	cursor pointer
 	transition all 0.3s
 

src/client/app/common/views/components/ui/switch.vue

@@ -64,6 +64,12 @@ root(isDark)
 	cursor pointer
 	transition all 0.3s
 
+	&:first-child
+		margin-top 0
+
+	&:last-child
+		margin-bottom 0
+
 	> *
 		user-select none
 
@@ -89,6 +95,7 @@ root(isDark)
 
 	> .button
 		display inline-block
+		flex-shrink 0
 		margin 3px 0 0 0
 		width 34px
 		height 14px