rebase.scss

@import '../shared/base';
@import '../shared/buttons';
@import '../shared/utils';

body {
	--avatar-size: 2.2rem;
	overflow: overlay;
}

.vscode-dark {
	--avatar-bg: var(--color-background--lighten-30);
}
.vscode-light {
	--avatar-bg: var(--color-background--darken-30);
}

.container {
	display: grid;
	font-size: 1.3em;
	grid-template-areas: 'header' 'entries' 'footer';
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	height: 100vh;
	margin: 0 auto;
	max-width: 1200px;
	min-width: 495px;
}

header {
	grid-area: header;

	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0;
	gap: 0 0.5em;
	position: relative;

	h2 {
		flex: auto 0 1;
		margin-top: 0.5em;
		margin-right: 1em;
		font-size: 2.3rem;
	}

	h4 {
		flex: auto 1 1;
		margin-top: 0;
	}

	h3,
	h4#subhead-status {
		flex: 100% 1 1;
		margin: 0.25em 0 0.5em 0;
	}

	& > *[class^='icon--'],
	& > *[class*=' icon--'] {
		&::before {
			opacity: 0.7;
			font-size: 1.4em;
			top: 5px;
			line-height: 0.6em;
		}
	}
}

h4 {
	font-size: 1.5rem;
	opacity: 0.8;
}

h4#subhead {
	padding-right: 12rem;
}

footer {
	grid-area: footer;

	display: grid;
	grid-template-areas: 'shortcuts' 'actions';
	border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
}

.entries-container {
	grid-area: entries;
	overflow: auto;
}

.entries {
	padding: 0;
}

.entries--empty {
	border: none;

	h3 {
		margin: 1em auto;
		width: fit-content;
	}
}

.shortcuts {
	grid-area: shortcuts;
	display: flex;
	justify-content: center;
	text-align: center;
}

.actions {
	grid-area: actions;
	margin: 0.5rem 0 1rem 0;
	display: flex;
	flex-wrap: wrap;
}

.actions--left {
	display: flex;
	gap: 0 1rem;
}

.actions--right {
	display: flex;
	margin-left: auto;
	gap: 0 1rem;
}

.button {
	letter-spacing: 0.1rem;
	margin: 0;
	padding: 0.5rem 1rem;

	.shortcut {
		margin: 0.1rem 0 0 0;
	}
}

$entry-padding: 7px;

.entry,
.entry-blocked {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $entry-padding 0;
	border-radius: 3px;
}

.entry {
	padding-left: 26px;
	margin: 0 5px 0 0;
	content-visibility: auto;
	contain-intrinsic-size: auto 36px;

	&::before {
		display: inline-block;
		content: ' ';
		background-color: var(--color-background);
		border-right: 2px solid;
		height: 100%;
		position: absolute;
		z-index: 0;
		left: 10px;
		top: 0;
		transform: translateX(-50%);

		.vscode-dark & {
			border-right-color: var(--color-background--lighten-15);
		}
		.vscode-light & {
			border-right-color: var(--color-background--darken-15);
		}
	}

	&::after {
		display: inline-block;
		content: ' ';
		background-color: var(--color-background);
		border: 2px solid var(--color-foreground--75);
		border-radius: 50%;
		height: 12px;
		width: 12px;
		left: 2px;
		position: absolute;
		z-index: 2;
	}

	&:focus-within {
		outline: 2px solid var(--color-highlight--50);
		outline-offset: -2px;
	}

	&.entry--edit,
	&.entry--reword {
		&::after {
			border: 2px solid rgba(0, 153, 0, 1) !important;
			z-index: 3;
		}

		&::before {
			border-right-color: rgba(0, 153, 0, 1);
		}
	}

	&.entry--squash,
	&.entry--fixup {
		&::after {
			display: none;
		}

		&::before {
			border-right-color: rgba(212, 153, 0, 1);
		}
	}

	&.entry--drop {
		&::after {
			display: none;
		}

		&::before {
			border-right-color: rgba(153, 0, 0, 1);
		}
	}

	&.entry--squash-to {
		&::after {
			border: 2px solid rgba(212, 153, 0, 1) !important;
			z-index: 3;
		}

		&::before {
			border-right-color: rgba(212, 153, 0, 1);
		}
	}

	.entry-blocked,
	&.entry--base,
	&.entry--done {
		& > .entry-action {
			opacity: 0.8;
		}

		& > .entry-message,
		& > .entry-avatar {
			opacity: 0.4;
		}

		& > .entry-date {
			opacity: 0.3;
		}

		& > .entry-sha {
			opacity: 0.4;
		}

		&::after {
			border: 2px solid var(--color-foreground--50);
		}

		&:focus,
		&:focus-within {
			border-color: transparent !important;
			outline: none !important;
		}

		& ~ .entry--done {
			margin-top: 0;
		}

		& > .entry-action {
			&::after {
				opacity: 0.7;
			}
		}
	}

	&.entry--done {
		margin-top: 5px;
	}

	&.entry--base {
		.entries--ascending & {
			padding-top: 1px;
			padding-bottom: 9px;
		}
		.entries:not(.entries--ascending) & {
			padding-top: 9px;
			padding-bottom: 1px;
		}
	}

	.entries--base:not(.entries--ascending) &:nth-last-of-type(2),
	.entries:not(.entries--base):not(.entries--ascending) &:nth-last-of-type(1),
	.entries--base.entries--ascending &:nth-of-type(2),
	.entries--ascending:not(.entries--base) &:nth-of-type(1) {
		& select {
			& > option[value='squash'],
			& > option[value='fixup'] {
				display: none;
			}
		}

		&.entry--squash-to {
			& select {
				& > option[value='drop'] {
					display: none;
				}
			}
		}
	}
}

.entry-blocked {
	width: 100%;

	.vscode-dark & {
		background: rgba(255, 255, 255, 0.1);
		box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.2);
	}

	.vscode-light & {
		background: rgba(0, 0, 0, 0.1);
		box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
	}
}

.entry--drag {
	opacity: 0 !important;
}

.entry--dragging {
	background: var(--color-highlight--25);
	opacity: 0.8;
}

.entry-handle {
	display: inline-block;
	border-left: 2px dotted;
	border-right: 2px dotted;
	height: 14px;
	width: 3px;
	margin-left: 10px;
	cursor: ns-resize;

	.vscode-dark & {
		border-color: var(--color-foreground--75);
	}

	.vscode-light & {
		border-color: var(--color-foreground--75);
	}
}

.entry-action {
	flex: auto 0 0;
	margin: 0 10px;

	.entry--edit > &,
	.entry--reword > & {
		& > select {
			border: 1px solid rgba(0, 153, 0, 1) !important;
			outline-color: rgba(0, 153, 0, 1) !important;
		}
	}

	.entry--squash > &,
	.entry--fixup > & {
		& > select {
			border: 1px solid rgba(212, 153, 0, 1) !important;
			outline-color: rgba(212, 153, 0, 1) !important;
		}
	}

	.entry--drop > & {
		& > select {
			border: 1px solid rgba(153, 0, 0, 1) !important;
			outline-color: rgba(153, 0, 0, 1) !important;
		}
	}
}

.entry-message {
	flex: 100% 1 1;
	margin: 0 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 0;

	.entry--fixup &,
	.entry--drop & {
		text-decoration: line-through;
		opacity: 0.25;
	}
}

.entry-avatar {
	flex: auto 0 0;
	margin: 0;

	.entry--squash &,
	.entry--fixup &,
	.entry--drop & {
		opacity: 0.25 !important;
	}
}

.entry-date,
.entry-sha {
	flex: auto 0 0;
	margin: 0 10px;
	opacity: 0.5;

	.vscode-light & {
		opacity: 0.6;
	}

	.entry--squash &,
	.entry--fixup &,
	.entry--drop & {
		text-decoration: line-through;
		opacity: 0.25 !important;
	}
}

.entry-sha {
	opacity: 0.7;
}

.shortcut {
	display: inline-block;
	margin: 5px 10px 5px 0;
	opacity: 0.6;

	& span {
		margin: 0 0 0 5px;
	}
}

.toggle {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0.5em;
	position: absolute;
	top: 2rem;
	right: 0;

	&__input,
	&__indicator {
		width: 2.4em;
		height: 1.4em;
	}

	&__input {
		position: absolute;
		appearance: none;
		opacity: 0;
		border-radius: 1em;
		padding: 0;

		&:focus {
			border-radius: 1em;
		}
	}

	&__indicator {
		position: relative;
		pointer-events: none;
		display: block;
		flex: none;
		border-radius: 1em;
		background-color: var(--color-background--lighten-075);
		border: 1px solid var(--color-background--lighten-075);

		&::before {
			content: '';
			top: 0.1em;
			left: 0.1em;
			position: absolute;
			width: 1.2em;
			height: 1.2em;
			border-radius: 100%;
			background-color: var(--color-button-foreground);

			:checked ~ & {
				transform: translateX(1em);
			}
		}

		:checked ~ & {
			background-color: var(--color-highlight);
		}

		:focus ~ & {
			border-color: var(--color-background);
			box-shadow: 0 0 0 1px var(--color-focus-border);
		}
	}
}

@import '../shared/codicons';