Light mode support and misc improvements

phil294 · Oct 12, 2024 · f52512a · f52512a
1 parent 77a452e
commit f52512a
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 51 deletions.
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -11,23 +11,17 @@ store.init()
 
 <style>
 :root {
-	--container-padding: 20px;
+	--container-padding: 12px;
 	--input-padding-vertical: 6px;
 	--input-padding-horizontal: 4px;
 	--input-margin-vertical: 4px;
 	--input-margin-horizontal: 0;
+	--text-secondary: rgb(from var(--vscode-editor-foreground) r g b / 0.7);
 }
 body {
-	color: #ccc;
 	font-size: var(--vscode-font-size);
 	font-weight: var(--vscode-font-weight);
 	font-family: var(--vscode-font-family);
-	background-color: #161616;
-}
-body.vscode-light,
-body.vscode-high-contrast-light {
-	background-color: var(--vscode-editor-background);
-	filter: invert(1) hue-rotate(180deg);
 }
 ol,
 ul,
@@ -48,7 +42,6 @@ a:active {
 }
 code {
 	font-family: var(--vscode-editor-font-family);
-	color: #ccc;
 }
 details {
 	overflow: auto;
@@ -61,7 +54,6 @@ details > summary {
 details > summary::before {
 	font: 16px/1 codicon;
 	user-select: none;
-	height: 100%;
 	padding-right: 6px;
 	vertical-align: middle;
 	display: inline-block;
@@ -164,7 +156,7 @@ html {
 	gap: 20px;
 }
 .padding {
-	padding: 0.5vmax;
+	padding: 12px;
 }
 .padding-l {
 	padding: 1vh 1vw;
@@ -179,7 +171,7 @@ html {
 	color: #ffa500;
 }
 .grey {
-	color: #808080;
+	color: var(--text-secondary);
 }
 button {
 	appearance: none;
@@ -191,7 +183,6 @@ button {
 	color: inherit;
 	user-select: none;
 	cursor: pointer;
-	color: #e5b567;
 }
 *[role=button] {
 	cursor: pointer;
@@ -230,7 +221,7 @@ input[type="button"]:enabled:active {
 input[type="submit"]:disabled,
 input[type="reset"]:disabled,
 input[type="button"]:disabled {
-	color: #808080;
+	color: var(--text-secondary);
 	pointer-events: auto;
 }
 .btn.btn-2 {
@@ -246,11 +237,15 @@ input[type="button"]:disabled {
 .btn-icon > vscode-icon {
 	display: inline;
 }
+vscode-button vscode-icon {
+	color: inherit !important;
+}
 progress.diff {
 	width: 30px;
 	height: 3px;
-	color: #090;
-	background-color: #8b0000;
+	opacity: 0.8;
+	color: lime;
+	background-color: red;
 }
 progress.diff::-webkit-progress-bar {
 	background-color: #8b0000;

diff --git a/web/src/components/Popup.vue b/web/src/components/Popup.vue
@@ -8,7 +8,7 @@
 						<div v-moveable="{move_target: main_ref}" class="titlebar center">
 							⠿⠿⠿⠿⠿
 						</div>
-						<button class="close" type="button" @click="close">
+						<button class="close center" type="button" @click="close">
 							<i class="codicon codicon-close" />
 						</button>
 					</header>
@@ -44,7 +44,7 @@ function close() {
 	right: 0;
 	z-index: 9999;
 	box-sizing: border-box;
-	background: rgba(0,0,0,0.9);
+	background: rgb(from var(--vscode-editor-foreground) r g b / 0.5);
 }
 .modal-background {
 	position: absolute;
@@ -56,8 +56,7 @@ function close() {
 	position: relative;
 	box-sizing: border-box;
 	overflow: auto;
-	resize: both;
-	background: rgba(128,128,128,0.125);
+	background: var(--vscode-editor-background);
 }
 .titlebar,
 .close {
@@ -72,10 +71,18 @@ function close() {
 	top: 0;
 	right: 1.3vmax;
 	font-family: revert;
+	height: 26px;
+	width: 26px;
 }
 .popup-content {
-	padding: 0 2vmax 3vmax;
+	padding: 0 24px 24px;
 	overflow: auto;
 	height: fit-content;
 }
+header {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+}
 </style>
diff --git a/web/src/views/CommitDetails.vue b/web/src/views/CommitDetails.vue
@@ -206,6 +206,7 @@ h2.summary {
 	word-break: break-word;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	margin-top: 0;
 }
 .body {
 	white-space: pre-wrap;

diff --git a/web/src/views/CommitFileChanges.vue b/web/src/views/CommitFileChanges.vue
@@ -210,7 +210,7 @@ function show_file(/** @type {string} */ filepath) {
 	white-space: pre;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: #e5b567;
+	color: var(--vscode-gitDecoration-modifiedResourceForeground);
 	flex-shrink: 0;
 }
 ul.list > li {
@@ -250,7 +250,7 @@ ul.list > li .dir {
 .list-row:hover,
 .tree-node > summary:hover,
 .tree-node > .body > .row:hover {
-	background: #2a2d2e;
+	background: var(--vscode-list-hoverBackground);
 }
 .list-row:hover > .file-actions,
 .tree-node > summary:hover > .file-actions,

diff --git a/web/src/views/CommitRow.vue b/web/src/views/CommitRow.vue
@@ -19,7 +19,7 @@
 					<span>
 						<strong>{{ commit.stats.insertions + commit.stats.deletions }}</strong>
 					</span>
-					<span class="grey"> in</span>
+					<span class="grey"> in </span>
 					<span class="grey">{{ commit.stats.files_changed }}</span>
 				</div>
 				<progress v-if="commit.stats" :value="(commit.stats.insertions / (commit.stats.insertions + commit.stats.deletions)) || 0" class="diff" title="Ratio insertions / deletions" />
@@ -110,7 +110,7 @@ let calculated_height = computed(() =>
 }
 .info > .datetime,
 .info > .author {
-	color: #808080;
+	color: var(--text-secondary);
 }
 .info > .datetime {
 	font-size: 12px;
@@ -122,6 +122,6 @@ let calculated_height = computed(() =>
 	width: 91px;
 }
 .commit-row.merge .subject {
-	color: #808080;
+	color: var(--text-secondary);
 }
 </style>
diff --git a/web/src/views/CommitsDetails.vue b/web/src/views/CommitsDetails.vue
@@ -68,5 +68,6 @@ h2.summary {
 	word-break: break-word;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	margin-top: 0;
 }
 </style>
diff --git a/web/src/views/GitInput.vue b/web/src/views/GitInput.vue
@@ -235,6 +235,8 @@ defineExpose({
 <style>
 .options .option.changed {
 	border-left: 2px solid #bc9550;
+	margin-left: -6px;
+	padding-left: 4px;
 }
 .options .option label {
 	white-space: pre;
@@ -246,7 +248,7 @@ defineExpose({
 .options .option details > summary {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	color: #808080;
+	color: var(--text-secondary);
 }
 .error-response,
 .success-response {

diff --git a/web/src/views/History.vue b/web/src/views/History.vue
@@ -92,7 +92,6 @@ details#history > summary {
 }
 details#history .dv {
 	padding: 20px;
-	background: #000;
 }
 details#history .dv li {
 	overflow: hidden;

diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
@@ -431,7 +431,7 @@ let { combine_branches_from_branch_name, combine_branches_actions, refresh_main_
 </script>
 <style scoped>
 details#log-config {
-	color: #808080;
+	color: var(--text-secondary);
 	overflow: hidden;
 	min-width: 65px;
 }
@@ -453,8 +453,7 @@ details#log-config[open] {
 	padding: 5px;
 	position: sticky;
 	z-index: 2;
-	background: #111;
-	border-bottom: 1px solid #424242;
+	border-bottom: 1px solid var(--vscode-sideBarSectionHeader-border);
 }
 #main-panel > nav #repo-selection {
 	/* overflow: hidden; */
@@ -495,8 +494,7 @@ details#log-config[open] {
 	padding: 0 2px;
 }
 #main-panel #quick-branch-tips,
-#main-panel #branches-connection,
-#main-panel #log.scroller {
+#main-panel #branches-connection {
 	padding-left: var(--container-padding);
 }
 #main-panel #branches-connection {
@@ -506,7 +504,7 @@ details#log-config[open] {
 	stroke-dasharray: 4;
 }
 #main-panel #git-status {
-	color: #555;
+	color: var(--text-secondary);
 	height: 110px;
 	position: fixed;
 	overflow: auto;
@@ -525,8 +523,10 @@ details#log-config[open] {
 #main-panel #quick-branch-tips > #all-branches,
 #main-panel #quick-branch-tips > #history {
 	position: absolute;
-	background: rgba(22,22,22,0.867);
-	box-shadow: 0 0 5px 2px rgba(22,22,22,0.867);
+	background: var(--vscode-editorWidget-background);
+	border: 1px solid var(--vscode-editorWidget-border);
+	padding: 5px;
+	padding-right: 10px;
 	border-radius: 5px;
 }
 #main-panel #quick-branch-tips > #all-branches {
@@ -536,8 +536,8 @@ details#log-config[open] {
 	max-width: clamp(300px, 70vw, 80vw);
 }
 #main-panel #quick-branch-tips > #history {
-	top: 35px;
-	right: 39px;
+	top: 52px;
+	right: 41px;
 	z-index: 2;
 }
 #main-panel #quick-branch-tips > #history[open] {
@@ -552,14 +552,15 @@ details#log-config[open] {
 	outline: none;
 }
 #main-panel #log.scroller .commit {
+	padding-left: var(--container-padding);
 	cursor: pointer;
 }
 #main-panel #log.scroller .commit.selected_commit {
-	box-shadow: 0 0 3px 0px #ffd700;
-	background: #292616;
+	background: var(--vscode-list-activeSelectionBackground)
 }
 #main-panel #log.scroller .commit :deep(.info) {
-	border-top: 1px solid #2e2e2e;
+	border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+	padding-right: var(--container-padding);
 }
 #main-panel #log.scroller .commit :deep(.info:hover) {
 	z-index: 1;
@@ -577,7 +578,8 @@ details#log-config[open] {
 #details-panel #selected-commits {
 	overflow: auto;
 	z-index: 1;
-	background: #161616;
+	background: var(--vscode-editorWidget-background);
+	border-left: 1px solid var(--vscode-sideBarSectionHeader-border);
 }
 #details-panel #close-selected-commit,
 #details-panel #close-selected-commits {
@@ -587,22 +589,28 @@ details#log-config[open] {
 	z-index: 1;
 }
 #details-panel .resize-hint {
-	color: #555;
+	color: var(--text-secondary);
 	font-size: small;
 	padding-left: 10px;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	background: var(--vscode-editorWidget-background);
 }
 </style>
 
 <style>
 .vue-recycle-scroller__item-view.hover > .commit {
-	background: #323232;
+	background: var(--vscode-list-hoverBackground);
 }
 </style>
 
 <style>
 .info:hover,
 .info:hover,
 .vue-recycle-scroller__item-view.hover > .commit .info:hover {
-	background: #323232 !important;
+	background: var(--vscode-list-hoverBackground) !important;
 }
 </style>
diff --git a/web/src/views/RefTip.vue b/web/src/views/RefTip.vue
@@ -7,8 +7,8 @@
 	</div>
 </template>
 <script setup>
-import { computed } from 'vue'
-import { head_branch, combine_branches, branch_actions, stash_actions, tag_actions, selected_git_action, show_branch } from '../state/store.js'
+import { computed } from 'vue';
+import { head_branch, combine_branches, branch_actions, stash_actions, tag_actions, selected_git_action, show_branch } from '../state/store.js';
 
 let props = defineProps({
 	git_ref: {
@@ -85,7 +85,7 @@ let context_menu_provider = computed(() => () => {
 </script>
 <style scoped>
 .ref-tip {
-	background: #000;
+	background: #1f1f1f;
 	font-weight: bold;
 	font-style: italic;
 	display: inline-block;
@@ -97,6 +97,7 @@ let context_menu_provider = computed(() => () => {
 	max-width: 350px;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	color: white;
 }
 .ref-tip:hover {
 	max-width: unset;

diff --git a/web/src/views/SVGVisualization.vue b/web/src/views/SVGVisualization.vue
@@ -69,11 +69,14 @@ let circle = computed(() => {
 .vis svg > path {
 	fill: none;
 }
+.vis svg > circle {
+	fill: var(--vscode-editor-background);
+}
 .vis svg > path.vis-line.is_head {
-	filter: drop-shadow(3px 0px 1px rgba(255,255,255,0.3)) drop-shadow(-3px 0px 1px rgba(255,255,255,0.3));
+	filter: drop-shadow(3px 0px 1px rgb(from var(--vscode-editor-foreground) r g b / 0.3)) drop-shadow(-3px 0px 1px rgb(from var(--vscode-editor-foreground) r g b / 0.3));
 }
 .vis svg > circle.vis-line.is_head {
-	fill: #fff;
+	fill: var(--vscode-editor-foreground);
 }
 .vis:after {
 	content: '';