jlumpe_obsidian-spacekeys/styles.css

/* ---------------------------------------------------------------------------------------------- */
/*                                            Variables                                           */
/* ---------------------------------------------------------------------------------------------- */

body {
	--spacekeys-suggestions-column-width: 250px;
	--spacekeys-suggestions-max-height: 40%;
	--spacekeys-suggestion-group-color: var(--text-accent);
	--spacekeys-suggestion-command-color: var(--text-normal);
	--spacekeys-suggestion-file-color: var(--text-normal);
}


/* ---------------------------------------------------------------------------------------------- */
/*                                             General                                            */
/* ---------------------------------------------------------------------------------------------- */

.prompt .spacekeys-modal-title {
	border-bottom: 1px solid var(--background-secondary);
	font-size: var(--font-ui-small);
	text-align: center;
	padding: var(--size-4-2);
}


/* ---------------------------------------------------------------------------------------------- */
/*                                          Primary modal                                         */
/* ---------------------------------------------------------------------------------------------- */

.spacekeys-modal {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-width: none;
	min-height: 0;
	max-height: var(--spacekeys-suggestions-max-height);
	/* overflow: hidden; */

	display: flex;
	flex-direction: column;

	padding: var(--size-4-2);
	gap: var(--size-4-2);

	border: none;
	border-top: var(--modal-border-width) solid var(--modal-border-color);
	border-radius: 0;
	box-shadow: none;

	.spacekeys-suggestions {
		flex: 1 1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--spacekeys-suggestions-column-width), 1fr));
		gap: var(--size-4-1) var(--size-4-2);
		padding: 0;
		overflow-y: auto;

		.spacekeys-suggestion {
			display: flex;
			flex-direction: row;

			/* line-height: var(--line-height-tight); */
			/* height: var(--line-height-tight); */

			gap: var(--size-4-2);

			&:hover {
				background-color: var(--background-modifier-hover);
			}

			.spacekeys-suggestion-key {
				flex: 0 0;

				kbd {
					/* font-size: var(--font-ui-medium); */
					color: var(--text-accent);
				}
			}

			.spacekeys-suggestion-label {
				flex: 1 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			/* Group */
			&.spacekeys-group {
				.spacekeys-suggestion-label {
					color: var(--spacekeys-suggestion-group-color);
				}

				.spacekeys-suggestion-key kbd {
					/* Not very readable? */
					/* color: var(--text-on-accent); */
					/* background: var(--interactive-accent); */
				}
			}

			/* Comamnd */
			&.spacekeys-command {
				.spacekeys-suggestion-label {
					color: var(--spacekeys-suggestion-command-color);
				}
			}

			/* File */
			&.spacekeys-file {
				.spacekeys-suggestion-label {
					color: var(--spacekeys-suggestion-file-color);
				}
			}

			/* Invalid */
			&.spacekeys-invalid {
				.spacekeys-suggestion-label {
					color: var(--text-error);
				}
			}
		}

	}

	.spacekeys-modal-status {
		flex: 0 0;
		font-size: var(--font-ui-medium);
		font-family: monospace;
		white-space: nowrap;

		&.spacekeys-modal-status-empty {
			color: var(--text-muted);
		}
	}
}

/* Collapsed state (after open, before delay) */
.spacekeys-modal-container.spacekeys-modal-collapsed {
	/* Hide the dimmed background effect */
	.modal-bg {
		/*
		For some reason, the default modal sets the opacity of the background element via an inline
		style. Since that overrides any attempts to set the opacity via CSS, the hacky workaround
		is to instead set the background color to transparent.
		*/
		background: rgba(0, 0, 0, 0);
	}
	.spacekeys-suggestions {
		display: none;
	}
}


/* ---------------------------------------------------------------------------------------------- */
/*                                      "Find key code" modal                                     */
/* ---------------------------------------------------------------------------------------------- */

input.spacekeys-key-code-generator {
	width: 100%;
	font-family: monospace;
	font-size: var(--font-ui-large);
}


/* ---------------------------------------------------------------------------------------------- */
/*                                             Others                                             */
/* ---------------------------------------------------------------------------------------------- */

/* Modal displaying keymap parse error. */
.modal.spacekeys-keymap-error {
	dl {
		margin-top: 1em;
		margin-bottom: 1em;

		display: grid;
		/* 2nd column takes all the space */
		grid-template-columns: 0fr 1fr;
		gap: .5em 1.5em;

		dt {
			font-weight: bold;
			white-space: nowrap;
		}

		dt, dd {
			margin: 0;
		}

		dd pre {
			text-wrap: wrap;
			margin: 0;
		}
	}
}