simplify md3 apply

NyaomiDEV · May 25, 2024 · be08243 · be08243
1 parent ea47878
commit be08243
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/lib/theme/style.css b/src/lib/theme/style.css
@@ -1,5 +1,5 @@
 /* Light */
-.md3 {
+.md3 * {
 	--ion-color-primary: rgb(var(--md3-light-primary));
 	--ion-color-primary-rgb: var(--md3-light-primary);
 	--ion-color-primary-contrast: rgb(var(--md3-light-on-primary));
@@ -115,7 +115,7 @@
 	--ion-background-color-step-950: rgb(var(--md3-shade-5));
 }
 
-.md3.ios {
+.ios.md3 * {
 	--ion-background-color: rgb(var(--md3-shade-95));
 	--ion-background-color-rgb: var(--md3-shade-95);
 
@@ -126,7 +126,7 @@
 }
 
 /* Dark */
-.md3.ion-palette-dark {
+.ion-palette-dark.md3 * {
 	--ion-color-primary: rgb(var(--md3-dark-primary));
 	--ion-color-primary-rgb: var(--md3-dark-primary);
 	--ion-color-primary-contrast: rgb(var(--md3-dark-on-primary));
@@ -242,6 +242,6 @@
 	--ion-background-color-step-950: rgb(var(--md3-shade-95));
 }
 
-.md3.ion-palette-dark.ios {
+.ion-palette-dark.ios.md3 * {
 	--ion-item-background: rgb(var(--md3-shade-12));
 }
diff --git a/src/modals/MemberEdit.vue b/src/modals/MemberEdit.vue
@@ -99,14 +99,12 @@ import { isDarkMode } from "../lib/mode";
 	function setAccent() {
 		if(member.value.color){
 			addMaterialColors(member.value.color, self.value.$el);
-			activateMaterialTheme(self.value.$el);
-			self.value.$el.classList.toggle("ion-palette-dark", isDarkMode());
 		}
 	}
 </script>
 
 <template>
-	<IonModal ref="self" :isOpen @didPresent="setAccent" @didDismiss="isOpen = false">
+	<IonModal ref="self" :isOpen @didPresent="setAccent" @didDismiss="dismiss">
 		<IonHeader>
 			<IonToolbar>
 				<IonButtons slot="start">
@@ -144,17 +142,17 @@ import { isDarkMode } from "../lib/mode";
 			</div>
 
 			<IonList class="member-actions" v-if="!isEditing">
-				<IonItem :button="true" :detail="true">
+				<IonItem button detail>
 					<IonIcon :ios="newspaperIOS" :md="newspaperMD" slot="start" aria-hidden="true" />
 					<IonLabel>{{ $t("members:edit.showBoardEntries") }}</IonLabel>
 				</IonItem>
-				<IonItem :button="true" :detail="true">
+				<IonItem button detail>
 					<IonIcon :ios="journalIOS" :md="journalMD" slot="start" aria-hidden="true" />
 					<IonLabel>{{ $t("members:edit.showJournalEntries") }}</IonLabel>
 				</IonItem>
 			</IonList>
 
-			<IonList v-if="isEditing" :inset="true">
+			<IonList v-if="isEditing" inset>
 					<IonItem lines="none">
 						<IonInput mode="md" fill="outline" :label="$t('members:edit.name')" labelPlacement="floating" v-model="member.name" />
 					</IonItem>
@@ -191,6 +189,10 @@ import { isDarkMode } from "../lib/mode";
 		--height: 100%;
 	}
 
+	ion-content {
+		--padding-bottom: 80px;
+	}
+
 	div.avatar-container {
 		position: relative;
 		width: fit-content;