src/styles/settings.scss - main - githubmirror/obsidian-clipper

src/styles/settings.scss
635 строк11 KB
Steph Ango
Highlights viewer (#778)
15 апр 2026, 06:20
15 апр 2026, 06:20e535a5b
@import 'sidebar';

.logo {
	fill: var(--color-accent-1);
}
.warning-container {
	background-color: var(--background-modifier-warning);
	border: 1px solid var(--background-modifier-warning-border);
	padding: 12px;
	border-radius: var(--radius-m);
	margin: 8px 0 0;
	font-size: var(--font-ui-smaller);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
	.warning-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(var(--color-orange-rgb));
	}
}

#settings-page {
	--settings-background: var(--background-primary);
	--settings-items-backgroud: var(--background-primary-alt);
	body {
		background-color: var(--settings-background);
	}
}

#settings {
	background-color: var(--settings-background);
	margin: 0 auto;
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

#settings-container {
	display: flex;
	height: 100%;
}
#content {
	flex-grow: 1;
	overflow: scroll;
}

h2 {
	margin-top: 0.5rem;
	padding-inline-start: 1rem;
}

label {
	font-weight: 400;
}

#navbar {
	display: none;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0 max(6%,20px);
	height: 40px;
	border-bottom: 1px solid var(--background-modifier-border);
	#navbar-title {
		font-weight: 600;
		font-size: var(--font-ui-medium);
		flex-grow: 1;
		display: flex;
		align-items: center;
		gap: 6px;
		svg {
			height: 20px;
		}
	}
}

.settings-section {
	display: none;
	flex-direction: column;
	gap: 8px;
	margin: 24px max(6%, 24px) 72px max(6%, 24px);
	max-width: 600px;

	&.active {
		display: block;
	}
}

.settings-section-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem;
}

.settings-section-actions {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.setting-item-control {
	display: flex;
	align-items: center;
}

.setting-items {
	background-color: var(--settings-items-backgroud);
	border-radius: var(--radius-m);
	corner-shape: var(--corner-shape);
	padding: 0.75rem 1.5rem;

	> .setting-item:not(.setting-item-heading) {
		border-top: 1px solid var(--background-modifier-border);
		&.is-hidden + .setting-item,
		&:first-child {
			border-top: none;
		}
	}
}

.setting-item {
	margin: 0.75rem 0;

	&.setting-item-heading {
		margin: 2rem 0 0.75rem;
	}
	&:first-child {
		border-top: none;
	}

	&:not(.mod-horizontal) {
		label {
			margin-bottom: 0.5rem;
		}
	}

	&.mod-horizontal {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 0.75rem 0 0.75rem;
		margin: 0;
		&:first-child {
			border-top: none;
		}
		+ .setting-item {
			margin-top: 0;
		}
		.setting-item-description {
			margin: 0.25rem 0;
		}
		.setting-item-info {
			font-size: var(--font-ui-small);
			label {
				margin: 0;
			}
		}
		button {
			min-width: 4.5rem;
		}
		input[type="range"] {
			flex: 1;
			min-width: 0;
		}
		.slider-value {
			font-size: var(--font-ui-smaller);
			min-width: 1.5rem;
			text-align: end;
			font-variant: tabular-nums;
		}
	}
}

.setting-item-description {
	color: var(--text-muted);
	font-size: var(--font-ui-smallest);
	margin: 0.25rem 0 0.75rem;
	line-height: 1.3;
	a {
		color: var(--text-muted);
		@media (hover: hover) {
			&:hover {
				color: var(--text-accent);
			}
		}
	}
	&:empty {
		display: none;
	}
}

#sidebar {
	overflow: scroll;
	padding: 16px 16px 24px 16px;

	.is-mobile & {
		background-color: var(--settings-background);
	}

	#settings-sidebar-title {
		display: flex;
		align-items: center;
		height: 28px;
		gap: 6px;
		font-weight: 600;
		font-size: var(--font-ui-medium);
		margin-bottom: 16px;
		padding: 0 0 0 0.425rem;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		.logo {
			height: 20px;
		}
	}

	@media (max-width: 768px) {
		#settings-sidebar-title {
			display: none;
		}
	}

	.sidebar-heading {
		font-weight: 500;
		margin-top: 16px;
		pointer-events: none;
		color: var(--text-faint);
		font-size: var(--font-ui-smaller);
	}

	ul {
		@extend .nav-list;

		.is-mobile & {
			font-size: var(--font-ui-medium);
		}

		li {
			justify-content: space-between;
		}
	}

	.nav-item-icon {
		width: 16px;
		height: 16px;
	}

	#new-template-btn {
		width: calc(100% - 12px);
		margin: 0.5rem 0.375rem;
	}

	#template-list {
		padding: 0.5rem 0.375rem;

		li {
			.template-name {
				flex-grow: 1;
				margin-right: auto;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-inline-end: 4px;
			}
			.delete-template-btn {
				flex-shrink: 1;
				background: none;
				border: none;
				cursor: pointer;
				padding: 2px;
				color: var(--text-muted);
				opacity: 0;
				margin: -6px;
				box-shadow: none;

				
			}
			&.active,
			&:hover {
				.delete-template-btn {
					opacity: 0.7;
					&:hover {
						opacity: 1;
					}
				}
			}
		}
	}
}

#vault-list {
	.setting-item-list-remove {
		margin-inline-start: auto;
	}
}

.setting-item-list {
	display: flex;
	flex-direction: column;
	margin: 0.5rem 0 0.5rem;
	padding: 0;
	li {
		user-select: none;
		-webkit-user-select: none;
		display: flex;
		flex-direction: row;
		gap: 0.25rem;
		padding: 2px 0;
		align-items: center;
		font-size: var(--font-ui-small);
		border-bottom: 1px solid var(--background-modifier-border);
		button {
			width: auto;
		}
		.setting-item-error {
			font-size: var(--font-ui-smallest);
			color: var(--text-warning);
		}
		.setting-item-default-btn {
			margin-inline-start: auto;
			font-size: var(--font-ui-smallest);
			color: var(--text-faint);
			background: none;
			border-radius: var(--radius-s);
			corner-shape: var(--corner-shape);
			padding: 1px 6px;
			cursor: pointer;
			white-space: nowrap;
			&:hover {
				color: var(--text-normal);
				border-color: var(--text-faint);
			}
			&.is-active {
				color: var(--text-normal);
				border-color: transparent;
				cursor: default;
			}
		}
		&:last-child {
			border-bottom: none;
		}
	}
}

#general-settings-form {
	#keyboard-shortcuts-list {
		display: flex;
		flex-direction: column;
		margin-top: 0.5rem;
	}

	.shortcut-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--background-modifier-border);
		span {
			font-size: var(--font-ui-small);
		}
		.setting-hotkey {
			background-color: var(--background-secondary);
			padding: 0.125rem 0.5rem;
			border-radius: var(--radius-s);
			corner-shape: var(--corner-shape);
			font-size: var(--font-ui-smaller);
		}
		&:last-child {
			border-bottom: none;
		}
	}
}

.is-firefox-mobile,
.is-mobile-safari {
	#hotkeys-subsection {
		display: none;
	}
}

:root {
	--settings-section-height-mobile: calc(100vh - var(--safe-area-inset-bottom) - 3rem);
}

@supports (height: 100dvh) {
	.is-mobile-safari {
		--settings-section-height-mobile: calc(100dvh - 3rem);
	}
}

@media (max-width: 768px) {
	#settings-page {
		--settings-background: var(--background-secondary);
		--settings-items-backgroud: var(--background-primary);
	}
	.settings-section {
		max-width: 600px;
	}

	#settings-container {
		min-height: 100vh;
		overflow: hidden;
	}
	#navbar {
		padding: 0 1.5rem;
		width: 100%;
		display: flex;
		height: 3rem;
		min-height: 3rem;
		background-color: var(--settings-background);
	}
	.settings-section {
		margin: 0 auto;
		padding: 1.5rem 1rem 3rem;
		height: var(--settings-section-height-mobile);
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.setting-item.mod-horizontal:not(.mod-toggle) {
		flex-direction: column;
		.setting-item-info,
		.setting-item-control {
			width: 100%;
			select {
				width: 100%;
			}
		}
	}
	.setting-items {
		padding: 0.75rem 1.25rem;
		border-radius: 2rem;
	}

	.usage-chart-name,
	label {
		font-weight: 500;
	}

	#content {
		display: flex;
		flex-direction: column;
		overflow:hidden;
		height: 100vh;
	}
	#template-list {
		margin-top: 1rem;
		border-radius: var(--radius-m);
		corner-shape: var(--corner-shape);
		background-color: var(--settings-items-backgroud);
	}
}

#reader-preview {
	-webkit-font-smoothing: antialiased;
	border-radius: var(--radius-m);
	corner-shape: var(--corner-shape);
	border: 1px solid var(--background-modifier-border);
	padding: 24px 28px;
	margin-bottom: 0.75rem;
	background: var(--background-primary, #fff);
	color: var(--text-normal, #222);
	font-family: var(--font-text, system-ui, -apple-system, sans-serif);
	font-size: calc(var(--font-text-size, 16px) + 0.25vw);
	transition: background 0.2s, color 0.2s;

	* {
		font-family: var(--font-text, system-ui, -apple-system, sans-serif);
	}

	::selection {
		background: var(--text-selection);
	}

	.reader-preview-title {
		font-size: 1.3em;
		font-weight: 700;
		margin: 0 0 8px;
		line-height: 1.3;
		color: var(--text-normal, #222);
	}

	.reader-preview-meta {
		font-family: var(--font-ui);
		font-size: 0.85em;
		margin: 0 0 16px;
		color: var(--text-muted, #5c5c5c);

		.reader-preview-meta-link {
			color: inherit;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
	}

	.reader-preview-body {
		font-size: 0.95em;
		line-height: var(--line-height-normal, 1.65);
		margin: 0;
		color: var(--text-normal, #222);
	}

	.reader-preview-link {
		color: var(--text-normal, #222);
		text-decoration: underline;
	}

	&.color-links .reader-preview-link {
		color: var(--text-accent-hover, #8a5cf5);
	}
}

.reader-font-error {
	font-size: 0.8em;
	color: var(--text-error, #e93147);
	margin-top: 4px;
	display: block;
}

.setting-item-stacked {
	flex-direction: column;
	align-items: flex-start;
	padding-top: 0.75rem;
	margin-top: 0;
}

#reader-theme-dark-section {
	margin-top: -0.75rem;
}

.reader-theme-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	width: 100%;
	margin: 1rem 0;
}

@media (max-width: 768px) {
	.reader-theme-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.reader-theme-option {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	outline: none;

	&:hover, &:focus, &:active {
		.reader-theme-name {
			color: var(--text-normal);
		}
	}

	&:hover {
		.reader-theme-swatch {
			border-color: var(--background-modifier-border-hover);
		}
	}
	&:focus {
		.reader-theme-swatch {
			border-color: var(--background-modifier-border-focus);
			box-shadow: 0 0 0 1px var(--background-modifier-border-focus);
		}
	}
	&:active {
		.reader-theme-swatch {
			border-color: var(--interactive-accent);
			box-shadow: 0 0 0 1px var(--interactive-accent);
		}
	}

	&.is-active {
		.reader-theme-swatch {
			border-color: var(--interactive-accent);
			box-shadow: 0 0 0 2px var(--interactive-accent);
		}
		.reader-theme-name {
			color: var(--text-accent);
		}
	}
}

.reader-theme-swatch {
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-s);
	corner-shape: var(--corner-shape);
	border: 1px solid var(--background-modifier-border);
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
	background: var(--background-primary, #fff);
}

.reader-theme-inner {
	font-size: 75%;
	padding: 1em 1.1em;
	pointer-events: none;
	user-select: none;
	font-family: var(--font-text, system-ui, -apple-system, sans-serif);
}

.reader-theme-inner-title {
	font-size: 1.5em;
	font-weight: 700;
	margin: 0 0 0.5em;
	line-height: 1.2;
	color: var(--text-normal, #222);
}

.reader-theme-inner-meta {
	font-size: 1em;
	margin: 0 0 0.7em;
	line-height: 1.3;
	color: var(--text-muted, #5c5c5c);
}

.reader-theme-inner-body {
	font-size: 1em;
	line-height: 1.5;
	margin: 0;
	color: var(--text-normal, #222);
}