move md3 overrides to its own css file

NyaomiDEV · Jul 31, 2024 · c10992c · c10992c
1 parent 27df716
commit c10992c
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 102 deletions.
diff --git a/src/lib/theme/components.css b/src/lib/theme/components.css
@@ -0,0 +1,102 @@
+/* Headerbar */
+.md3 ion-header.md {
+	box-shadow: unset;
+	-webkit-box-shadow: unset;
+}
+
+/* FAB */
+.md3 ion-fab-button.md {
+	--border-radius: 16px;
+}
+
+/* Segment Buttons */
+.md3 ion-segment.md.segment-alt ion-segment-button.md::part(native) {
+	border: 1px solid var(--color);
+	text-transform: none;
+	letter-spacing: normal;
+	font-size: unset;
+}
+
+.md3 ion-segment.md.segment-alt ion-segment-button.md.segment-button-checked::part(native) {
+	background-color: rgba(var(--ion-color-primary-rgb), 0.2);
+	color: var(--ion-text-color);
+}
+
+.md3 ion-segment.md.segment-alt ion-segment-button.md:first-child::part(native) {
+	border-right: 0;
+	border-radius: 48px 0 0 48px;
+}
+
+.md3 ion-segment.md.segment-alt ion-segment-button.md:last-child::part(native) {
+	border-left: 0;
+	border-radius: 0 48px 48px 0;
+}
+
+.md3 ion-segment.md.segment-alt ion-segment-button.md::part(indicator-background) {
+	height: 0px;
+}
+
+
+/* Toggles */
+.md3 ion-toggle.md::part(track) {
+	background-color: var(--ion-toolbar-background);
+	width: 56px;
+	height: 32px;
+	border-radius: 100px;
+}
+
+.md3 ion-toggle.md::part(track) {
+	border: 2px solid var(--ion-text-color-step-400);
+}
+
+.md3 ion-toggle.md::part(handle) {
+	background-color: var(--ion-text-color-step-400);
+	width: 18px;
+	height: 18px;
+	box-shadow: unset;
+	--handle-spacing: 8px;
+}
+
+.md3 ion-toggle.toggle-checked.md::part(track) {
+	background-color: var(--ion-color-primary);
+	border: 2px solid var(--ion-color-primary);
+}
+
+.md3 ion-toggle.toggle-checked.md::part(handle) {
+	background-color: var(--ion-toolbar-background);
+	width: 24px;
+	height: 24px;
+}
+
+
+/* Ranges / Sliders */
+.md3 ion-range.md {
+	--bar-height: 24px;
+	--bar-border-radius: 24px;
+	--knob-background: var(--ion-color-primary);
+	--knob-size: 64px;
+	--knob-border-radius: 64px;
+}
+
+.md3 ion-range.md::part(knob) {
+	width: 6px;
+	outline: 12px solid var(--ion-background-color);
+	transform: translateX(29px);
+}
+
+.md3 ion-range.md:active::part(knob) {
+	transform: translateX(29px) scale(0.75, 1);
+}
+
+.md3 ion-range.md::part(knob)::before {
+	display: none;
+}
+
+.md3 ion-range.md::part(tick) {
+	border-radius: 100%;
+	transform: scale(0.5);
+}
+
+.md3 ion-range.md::part(tick-active) {
+	display: none;
+}
diff --git a/src/lib/theme/style.css b/src/lib/theme/style.css
@@ -1,3 +1,5 @@
+@import url(components.css);
+
 /* Light */
 .md3 * {
 	--ion-color-primary: rgb(var(--md3-light-primary));

diff --git a/src/styles/override.css b/src/styles/override.css
@@ -33,109 +33,7 @@ p {
 	text-wrap: wrap;
 }
 
-.md3 ion-header.md{
-	box-shadow: unset;
-	-webkit-box-shadow: unset;
-}
-
 .logo {
 	width: 256px;
 	height: 256px;
-}
-
-
-.md3 ion-fab-button {
-	--border-radius: 16px;
-}
-
-/* Segment Buttons */
-.md3 ion-segment.segment-alt ion-segment-button.md::part(native) {
-	border: 1px solid var(--color);
-	text-transform: none;
-	letter-spacing: normal;
-	font-size: unset;
-}
-
-.md3 ion-segment.segment-alt ion-segment-button.md.segment-button-checked::part(native) {
-	background-color: rgba(var(--ion-color-primary-rgb), 0.2);
-	color: var(--ion-text-color);
-}
-
-.md3 ion-segment.segment-alt ion-segment-button.md:first-child::part(native) {
-	border-right: 0;
-	border-radius: 48px 0 0 48px;
-}
-
-.md3 ion-segment.segment-alt ion-segment-button.md:last-child::part(native) {
-	border-left: 0;
-	border-radius: 0 48px 48px 0;
-}
-
-.md3 ion-segment.segment-alt ion-segment-button.md::part(indicator-background) {
-	height: 0px;
-}
-
-
- /* Toggles */ 
-.md3 ion-toggle.md::part(track) {
-	background-color: var(--ion-toolbar-background);
-	width: 56px;
-	height: 32px;
-	border-radius: 100px;
-}
-
-.md3 ion-toggle.md::part(track) {
-	border: 2px solid var(--ion-text-color-step-400);
-}
-
-.md3 ion-toggle.md::part(handle) {
-	background-color: var(--ion-text-color-step-400);
-	width: 18px;
-	height: 18px;
-	box-shadow: unset;
-	--handle-spacing: 8px;
-}
-
-.md3 ion-toggle.toggle-checked.md::part(track) {
-	background-color: var(--ion-color-primary);
-	border: 2px solid var(--ion-color-primary);
-}
-
-.md3 ion-toggle.toggle-checked.md::part(handle) {
-	background-color: var(--ion-toolbar-background);
-	width: 24px;
-	height: 24px;
-} 
-
-
-/* Ranges / Sliders */
-.md3 ion-range {
-    --bar-height: 24px;
-    --bar-border-radius: 24px;
-    --knob-background: var(--ion-color-primary);
-    --knob-size: 64px;
-	--knob-border-radius: 64px;
-}
-
-.md3 ion-range::part(knob) {
-	width: 6px;
-	outline: 12px solid var(--ion-background-color);
-	transform: translateX(29px);
-}
-
-.md3 ion-range:active::part(knob) {
-	transform: translateX(29px) scale(0.75,1);
-}
-
-.md3 ion-range::part(knob)::before {
-	display: none;
-}
-
-.md3 ion-range::part(tick) {
-	border-radius: 100%;
-	transform: scale(0.5);
-}
-
-.md3 ion-range::part(tick-active) {
-	display: none;
 }