wip

src/client/app.vue

@@ -911,7 +911,6 @@ export default Vue.extend({
 		> main {
 			width: $main-width;
 			min-width: $main-width;
-			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
@@ -926,10 +925,6 @@ export default Vue.extend({
 						padding: var(--margin) 0;
 					}
 
-					&:not(.naked) {
-						background: var(--pageBg);
-					}
-
 					&.naked {
 						background: var(--bg);
 					}
@@ -970,9 +965,7 @@ export default Vue.extend({
 
 		> .widgets {
 			box-sizing: border-box;
-			margin-left: var(--margin);
+			margin: 0 var(--margin);
-			background: var(--pageBg);
-			box-shadow: 1px 0 0 0 var(--divider),-1px 0 0 0 var(--divider);
 
 			@media (max-width: $side-hide-threshold) {
 				display: none;
@@ -982,7 +975,9 @@ export default Vue.extend({
 				position: sticky;
 				top: $header-height;
 				height: calc(100vh - #{$header-height});
+				padding: 0 var(--margin);
 				overflow: auto;
+				box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
 
 				> * {
 					margin: var(--margin) 0;

src/client/components/notifications.vue

@@ -87,13 +87,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mfcuwfyp {
-	> .notifications {
-		> ::v-deep * {
-			//margin-bottom: var(--margin);
-			margin-bottom: 0;
-		}
-	}
-
 	> .empty {
 		margin: 0;
 		padding: 16px;

src/client/pages/my-groups/index.vue

@@ -8,7 +8,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('ownedGroups') }}</template>
 		<mk-pagination :pagination="ownedPagination" #default="{items}" ref="owned">
-			<div class="_frame" v-for="group in items" :key="group.id">
+			<div class="_card" v-for="group in items" :key="group.id">
 				<div class="_title"><router-link :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</router-link></div>
 				<div class="_content"><mk-avatars :user-ids="group.userIds"/></div>
 			</div>
@@ -18,7 +18,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template>
 		<mk-pagination :pagination="invitationPagination" #default="{items}" ref="invitations">
-			<div class="_frame" v-for="invitation in items" :key="invitation.id">
+			<div class="_card" v-for="invitation in items" :key="invitation.id">
 				<div class="_title">{{ invitation.group.name }}</div>
 				<div class="_content"><mk-avatars :user-ids="invitation.group.userIds"/></div>
 				<div class="_footer">
@@ -32,7 +32,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('joinedGroups') }}</template>
 		<mk-pagination :pagination="joinedPagination" #default="{items}" ref="joined">
-			<div class="_frame" v-for="group in items" :key="group.id">
+			<div class="_card" v-for="group in items" :key="group.id">
 				<div class="_title">{{ group.name }}</div>
 				<div class="_content"><mk-avatars :user-ids="group.userIds"/></div>
 			</div>

src/client/style.scss

@@ -278,7 +278,11 @@ hr {
 ._panel {
 	position: relative;
 	background: var(--panel);
+	border-radius: var(--radius);
+
+	._panel {
 		box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
+	}
 }
 
 .__panelButton {
@@ -374,33 +378,6 @@ hr {
 	}
 }
 
-._frame {
-	position: relative;
-	border: solid 1px var(--divider);
-	border-radius: var(--radius);
-	margin: var(--margin);
-
-	> ._title {
-		margin: 0;
-		padding: 16px;
-		border-bottom: solid 1px var(--divider);
-		font-weight: bold;
-	}
-
-	> ._content {
-		padding: 16px;
-
-		& + ._content {
-			border-top: solid 1px var(--divider);
-		}
-	}
-
-	> ._footer {
-		border-top: solid 1px var(--divider);
-		padding: 16px;
-	}
-}
-
 ._fullinfo {
 	padding: 32px;
 	text-align: center;

src/client/themes/_dark.json5

@@ -20,7 +20,6 @@
 		panel: '#000',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',
-		pageBg: ':lighten<5<@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':lighten<17<@fg',

src/client/themes/_light.json5

@@ -20,7 +20,6 @@
 		panel: '#fff',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',
-		pageBg: '@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':darken<17<@fg',