update style

Author: mProjectsCode

astro.config.mjs

@@ -88,7 +88,7 @@ export default defineConfig({
 					tsconfig: 'obsidian-meta-bind-plugin/packages/obsidian/tsconfig.json',
 					sidebar: {
 						label: 'API Reference',
-						collapsed: true,
+						collapsed: false,
 					},
 				}),
 			],

src/components/inputField/InputFieldAllowedArguments.astro

@@ -10,7 +10,7 @@ interface Props {
 const { type } = Astro.props;
 ---
 
-<p>The following input field arguments are allowed for the <code>{type}</code> input field.</p>
+<p>The following input field arguments can be used on the <code>{type}</code> input field.</p>
 
 <ul>
 	{

src/components/inputField/InputFieldArgumentAllowedInputFields.astro

@@ -12,12 +12,12 @@ const { type } = Astro.props;
 {
 	ConfigHelper.inputFieldArgument.doesAllowAllInputFieldTypes(type) ? (
 		<p>
-			The input field argument <code>{type}</code> is allowed in all input fields.
+			The input field argument <code>{type}</code> can be used on all input fields.
 		</p>
 	) : (
 		<>
 			<p>
-				The input field argument <code>{type}</code> is allowed in the following input fields.
+				The input field argument <code>{type}</code> can be used on the following input fields.
 			</p>
 			<ul>
 				{ConfigHelper.inputFieldArgument.getAllowedInputFieldTypes(type).map(x => (

src/components/viewField/ViewFieldAllowedArguments.astro

@@ -10,7 +10,7 @@ interface Props {
 const { type } = Astro.props;
 ---
 
-<p>The following view field arguments are allowed for the <code>{type}</code> view field.</p>
+<p>The following view field arguments can be used on the <code>{type}</code> view field.</p>
 
 <ul>
 	{

src/components/viewField/ViewFieldArgumentAllowedInputFields.astro

@@ -13,12 +13,12 @@ const config = ViewFieldArgumentConfigs[type];
 {
 	ConfigHelper.viewFieldArgument.doesAllowAllViewFieldTypes(type) ? (
 		<p>
-			The view field argument <code>{type}</code> is allowed in all view fields.
+			The view field argument <code>{type}</code> can be used on all view fields.
 		</p>
 	) : (
 		<>
 			<p>
-				The view field argument <code>{type}</code> is allowed in the following view fields.
+				The view field argument <code>{type}</code> can be used on the following view fields.
 			</p>
 			<ul>
 				{ConfigHelper.viewFieldArgument.getAllowedViewFieldTypes(type).map(x => (

src/content/docs/reference/inputFieldArguments/class.mdx

@@ -14,6 +14,7 @@ import { InputFieldArgumentType, InputFieldType } from '../../../../config/stati
 ### Description
 
 The `class` argument lets you add one or multiple CSS classes to an input field.
+For more info on styling input fields, see the [Styling guide](/obsidian-meta-bind-plugin-docs/guides/stylingandcss/).
 
 ### Values
 

src/styles/custom.css

@@ -11,3 +11,60 @@ table.full-width {
 	display: table;
 	width: 100%;
 }
+
+/* remove extra colors */
+:root,
+:root[data-theme='light'] {
+	--sl-color-bg-nav: var(--sl-color-bg);
+	--sl-color-bg-sidebar: var(--sl-color-bg);
+
+	/* rounded code blocks */
+	--ec-brdRad: 0.5rem !important;
+	--ec-brdWd: 0px !important;
+}
+
+/* Nice scroll bars */
+* {
+	scrollbar-color: var(--sl-color-gray-6) var(--sl-color-bg);
+	scrollbar-width: thin;
+}
+
+.expressive-code pre {
+	scrollbar-color: var(--sl-color-gray-5) var(--sl-color-gray-6) !important;
+	scrollbar-width: thin !important;
+}
+
+/* Sidebar active page */
+[aria-current='page'],
+[aria-current='page']:hover,
+[aria-current='page']:focus {
+	color: var(--sl-color-text-accent);
+	background-color: var(--sl-color-gray-6);
+}
+
+/* Remove some borders */
+.right-sidebar {
+	border: none;
+}
+
+.content-panel + .content-panel {
+	border: none;
+}
+
+.sidebar-pane {
+	border: none;
+}
+
+.header {
+	border: none;
+}
+
+summary#starlight__on-this-page--mobile {
+	border: none;
+}
+
+/* rounded asides */
+aside.starlight-aside {
+	border: none;
+	border-radius: 0.5rem;
+}