feat: Initial clean release of CHM

packages/app-desktop/gui/ConfigScreen/Sidebar/style.scss

@@ -0,0 +1,104 @@
+.settings-sidebar {
+	display: flex;
+	background-color: var(--joplin-background-color2);
+	flex-direction: column;
+	flex: 0 0 clamp(232px, 18vw, 288px);
+	overflow-x: hidden;
+	overflow-y: auto;
+	border-right: 1px solid var(--joplin-divider-color);
+	padding: 12px 10px;
+	box-sizing: border-box;
+
+	> .searchbox {
+		padding: 2px 2px 12px;
+	}
+
+	> .tablist > .separator {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: row;
+		color: var(--joplin-color2);
+		padding: 20px 10px 8px;
+		border: 0;
+		background-color: transparent;
+		font-size: calc(var(--joplin-font-size) * 0.78);
+		font-weight: 650;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	> .tablist > .item {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		border: none;
+		min-height: 44px;
+		padding: 10px 12px;
+		border-radius: 7px;
+		background: none;
+		transition: background-color 160ms ease, color 160ms ease;
+		text-align: left;
+		cursor: pointer;
+		font-family: inherit;
+		font-size: inherit;
+
+		&.sub {
+			padding-left: 38px;
+		}
+
+		&.selected {
+			background: var(--joplin-background-color-hover2);
+			opacity: 1;
+
+			> .icon {
+				color: var(--joplin-color2);
+			}
+
+			> .label {
+				color: var(--joplin-color2);
+			}
+		}
+
+		&:not(.selected):not(.disabled) {
+			opacity: 0.8;
+		}
+
+		&:hover:not(.disabled) {
+			background-color: var(--joplin-background-color-hover2);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--joplin-color);
+			outline-offset: 2px;
+		}
+
+		&.disabled {
+			opacity: 0.3;
+			cursor: not-allowed;
+		}
+
+		> .icon {
+			font-size: calc(var(--joplin-font-size) * 1.2);
+			color: var(--joplin-color2);
+			margin-right: 12px;
+		}
+
+		> .label {
+			font-size: var(--joplin-font-size);
+			font-weight: 550;
+			color: var(--joplin-color2);
+			white-space: nowrap;
+			display: flex;
+			flex: 1;
+			align-items: center;
+			user-select: none;
+
+			> mark {
+				background-color: var(--joplin-search-marker-background-color);
+				color: var(--joplin-search-marker-color);
+				padding: 0;
+			}
+		}
+	}
+}