Added Color Scheme Styles + Related fixes for Plugins

damiankorcz · May 31, 2023 · 1c1180c · 1c1180c
1 parent 5ce0390
commit 1c1180c
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 12 deletions.
diff --git a/src/scss/Info/styleSettingsConfig.scss b/src/scss/Info/styleSettingsConfig.scss
@@ -49,6 +49,23 @@ settings:
             -
                 label: Custom
                 value: pt-color-scheme-custom-lt
+    -
+        id: color-scheme-style-lt
+        title: Color Scheme Style
+        description: Adjusts the style used by the main elements in the UI.
+        type: class-select
+        allowEmpty: false
+        default: pt-color-scheme-style-default-lt
+        options:
+            -
+                label: Default
+                value: pt-color-scheme-style-default-lt
+            -
+                label: Border Only
+                value: pt-color-scheme-style-border-only-lt
+            -
+                label: Minimal
+                value: pt-color-scheme-style-minimal-lt
     -
         id: accent-style-lt
         title: Accent Style
@@ -164,7 +181,7 @@ settings:
     -
         id: color-accent-text-lt
         title: Custom Accent Text Color
-        description: Accent Text Color Lightness should ideally be the darkest of the 3.
+        description: Accent Text Color should ideally be the darkest of the 3.
         type: variable-color
         format: hsl-values
         opacity: false
@@ -221,6 +238,23 @@ settings:
             -
                 label: Border & Filled
                 value: pt-accent-style-borderandfilled-dt
+    -
+        id: color-scheme-style-dt
+        title: Color Scheme Style
+        description: Adjusts the style used by the main elements in the UI.
+        type: class-select
+        allowEmpty: false
+        default: pt-color-scheme-style-default-dt
+        options:
+            -
+                label: Default
+                value: pt-color-scheme-style-default-dt
+            -
+                label: Border Only
+                value: pt-color-scheme-style-border-only-dt
+            -
+                label: Minimal
+                value: pt-color-scheme-style-minimal-dt
     -
         id: dark-accent-color-preset
         title: Accent Color Preset
@@ -316,7 +350,7 @@ settings:
     -
         id: color-accent-text-dt
         title: Custom Accent Text Color
-        description: Accent Text Color Lightness should ideally be the lightest of the 3.
+        description: Accent Text Color should ideally be the lightest of the 3.
         type: variable-color
         format: hsl-values
         opacity: false

diff --git a/src/scss/Plugins/Community/dictionary.scss b/src/scss/Plugins/Community/dictionary.scss
@@ -9,10 +9,11 @@
 
 	.search-input-container {
 		display: flex;
-		margin-top: -1px;
+		align-items: center;
+		justify-content: center;
+		height: var(--header-height);
+		padding: var(--size-4-1);
 		background-color: var(--background-secondary);
-		border-top: 1px solid var(--window-border);
-		border-bottom: 1px solid var(--window-border);
 		border-bottom: var(--window-border);
 	}
 
@@ -61,9 +62,15 @@
 
 	.main.svelte-1ufvm6z.svelte-1ufvm6z,
 	.main.svelte-5jhpts.svelte-5jhpts {
-		margin: var(--size-4-2);
+		padding: unset;
+		margin: var(--size-4-1);
 		border-radius: var(--radius-m);
 
+		audio {
+			padding: 0 var(--size-4-2);
+			margin: var(--size-4-2) 0;
+		}
+
 		.theme-light & {
 			background-color: var(--background-primary);
 		}
@@ -74,6 +81,7 @@
 	}
 
 	.container.svelte-17ilbu5:nth-child(2) .main.svelte-5jhpts {
+		margin: var(--size-4-2);
 		border: 1px solid var(--window-border-color);
 	}
 

diff --git a/src/scss/Plugins/Community/emojiToolbar.scss b/src/scss/Plugins/Community/emojiToolbar.scss
@@ -7,6 +7,12 @@
 		border-top-color: var(--window-border-color);
 	}
 }
+
+.emoji-mart-dark {
+	background-color: var(--background-secondary);
+
+	.emoji-mart-category-label span {
+		background-color: var(--background-secondary);
 	}
 }
 

diff --git a/src/scss/Plugins/Community/fileTreeAlternative.scss b/src/scss/Plugins/Community/fileTreeAlternative.scss
@@ -122,13 +122,25 @@
 	}
 
 	#file-tree-divider-horizontal {
+		width: 1px;
+		margin-right: unset;
+		margin-left: unset;
 		border-right: 1px solid var(--window-border-color);
+		opacity: unset;
+
+		&:hover {
+			width: 3px;
+			background-color: var(--divider-color-hover);
+		}
+	}
+
 	.oz-file-tree-files {
 		padding: var(--size-4-1) !important;
 	}
 
 	.oz-nav-file {
 		margin-bottom: var(--size-2-1);
+		margin-left: unset;
 		border: 2px solid transparent;
 		border-radius: var(--radius-s);
 	}

diff --git a/src/scss/Plugins/Community/recentFiles.scss b/src/scss/Plugins/Community/recentFiles.scss
@@ -5,7 +5,6 @@
 	}
 
 	.nav-folder.mod-root {
-		height: fit-content;
 		padding: var(--size-4-1);
 
 		.theme-light & {

diff --git a/src/scss/Plugins/Community/styleSettings.scss b/src/scss/Plugins/Community/styleSettings.scss
@@ -2,6 +2,7 @@
 div.workspace-leaf-content[data-type="style-settings"] {
 	div.view-content {
 		padding: var(--file-margins);
+		padding-bottom: calc(var(--size-4-8) + var(--scroll-bar-size));
 
 		body.is-mobile & {
 			padding: 32px 16px;

diff --git a/src/scss/Plugins/Community/tagFolder.scss b/src/scss/Plugins/Community/tagFolder.scss
@@ -1,11 +1,23 @@
-// [Plugins - Community] Style Settings
+// [Plugins - Community] Tag Folder
 .workspace-leaf-content[data-type="tagfolder-view"] {
 	.nav-files-container {
 		padding: unset;
 	}
 
 	.nav-folder.mod-root {
-		padding: var(--size-4-1);
+		> .nav-folder-title {
+			align-items: center;
+			justify-content: center;
+			height: var(--header-height);
+			padding: 0 var(--size-4-2);
+			background-color: var(--background-secondary);
+			border-bottom: var(--window-border);
+			border-radius: unset;
+		}
+
+		> .tree-item-children {
+			padding: var(--size-4-1);
+		}
 	}
 
 	.tagfolder-quantity .itemscount {

diff --git a/src/scss/Variables/coreVariables.scss b/src/scss/Variables/coreVariables.scss
@@ -95,14 +95,13 @@ body {
 
 	--prompt-border-color: var(--window-border-color);
 
-	--embed-border-top: var(--window-border);
-	--embed-border-bottom: var(--window-border);
-	--embed-border-right: var(--window-border);
 	--embed-border-top: 1px solid var(--window-border-color);
 	--embed-border-bottom: 1px solid var(--window-border-color);
 	--embed-border-right: 1px solid var(--window-border-color);
 	--embed-padding: unset;
 
+	--code-comment: var(--color-grey-text);
+
 	// Custom Prism Properties
 	--blur-intensity: 8px;
 	--accent-border-width: 2px;
@@ -248,6 +247,17 @@ body {
 		--pdf-background: var(--background-primary);
 		--pdf-sidebar-background: var(--background-primary);
 
+		&.pt-color-scheme-style-border-only-lt {
+			--background-secondary: var(--background-primary);
+			--background-secondary-blur: var(--background-primary);
+		}
+
+		&.pt-color-scheme-style-minimal-lt {
+			--background-secondary: var(--background-primary);
+			--background-secondary-blur: var(--background-primary);
+			--window-border: 1px solid transparent;
+		}
+
 		&.pt-highlight-text-light-lt {
 			--highlight-text-normal: var(--background-primary);
 		}
@@ -424,6 +434,17 @@ body {
 		--pdf-background: var(--background-secondary-alt);
 		--pdf-sidebar-background: var(--background-secondary-alt);
 
+		&.pt-color-scheme-style-border-only-dt {
+			--background-secondary: var(--background-secondary-alt);
+			--background-secondary-blur: var(--background-secondary-alt);
+		}
+
+		&.pt-color-scheme-style-minimal-dt {
+			--background-secondary: var(--background-secondary-alt);
+			--background-secondary-blur: var(--background-secondary-alt);
+			--window-border: 1px solid transparent;
+		}
+
 		&.pt-highlight-text-light-dt {
 			--highlight-text-normal: var(--text-normal);
 		}