CSS style overhaul to nested style

Author Mitja Felicijan <mitja.felicijan@gmail.com> 2026-05-09 18:55:45 +0200
Committer Mitja Felicijan <mitja.felicijan@gmail.com> 2026-05-09 18:57:47 +0200
Commit dbae0e989f4ae79e8b9b794692f728858b3df892 (patch)
-rw-r--r-- static/style.css 173
-rw-r--r-- views/repository.html 2
2 files changed, 86 insertions, 89 deletions
diff --git a/static/style.css b/static/style.css
...
174
	text-overflow: ellipsis;
174
	text-overflow: ellipsis;
175
	color: #000000;
175
	color: #000000;
176
	text-decoration: none;
176
	text-decoration: none;
177
}
  
178
  
177
  
179
.tree-entry:hover {
178
	&:hover {
180
	background: var(--table-row-hover-bg);
179
		background: var(--table-row-hover-bg);
181
	text-decoration: none;
180
		text-decoration: none;
182
}
181
	}
183
  
182
  
184
.tree-entry.active {
183
	&.active {
185
	font-weight: bold;
184
		font-weight: bold;
186
	background: var(--bg);
185
		background: var(--bg);
187
	color: var(--link);
186
		color: var(--link);
188
}
187
	}
189
  
188
  
190
.tree-entry.directory {
189
	&.directory {
191
	color: #000000;
190
		color: #000000;
  
191
	}
192
}
192
}
193
  
193
  
194
.code-container {
194
.code-container {
...
197
	flex-direction: column;
197
	flex-direction: column;
198
	border: 1px solid var(--border);
198
	border: 1px solid var(--border);
199
	min-width: 0;
199
	min-width: 0;
200
}
  
201
  
200
  
202
.code-header {
201
	.code-header {
203
	display: flex;
202
		display: flex;
204
	justify-content: space-between;
203
		justify-content: space-between;
205
	align-items: center;
204
		align-items: center;
206
	padding: 0.5em 1em;
205
		padding: 0.5em 1em;
207
	background: var(--table-header-bg);
206
		background: var(--table-header-bg);
208
	border-bottom: 1px solid var(--border);
207
		border-bottom: 1px solid var(--border);
209
	position: sticky;
208
		position: sticky;
210
	top: 0;
209
		top: 0;
211
	z-index: 10;
210
		z-index: 10;
212
	font-size: small;
211
		font-size: small;
213
	font-family: monospace;
212
		font-family: monospace;
214
}
213
	}
215
  
214
  
216
.code-view {
215
	.code-view {
217
	border: none;
216
		border: none;
218
}
217
		pre { background: none !important; }
219
  
218
  
220
.code-view pre { background: none !important; }
219
		code > span > span:first-child {
221
  
220
			color: var(--ln-fg);
222
.code-view code > span > span:first-child {
221
			background: var(--ln-bg);
223
	color: var(--ln-fg);
222
			border-right: 1px solid var(--border);
224
	background: var(--ln-bg);
223
			font-size: smaller;
225
	border-right: 1px solid var(--border);
224
		}
226
	font-size: smaller;
225
	}
227
}
226
}
228
  
227
  
229
.files-view {
228
.files-view {
...
287
	}
286
	}
288
}
287
}
289
  
288
  
290
.tree-view details summary {
289
.tree-view {
291
	list-style: none;
290
	details {
292
	cursor: pointer;
291
		display: block;
293
	outline: none;
292
		summary {
294
}
293
			list-style: none;
  
294
			cursor: pointer;
  
295
			outline: none;
  
296
		}
295
  
297
  
296
.tree-view details summary::-webkit-details-marker {
298
		summary::-webkit-details-marker {
297
	display: none;
299
			display: none;
298
}
300
		}
299
  
301
  
300
.tree-view details summary::before {
302
		summary::before {
301
	content: "▸";
303
			content: "▸";
302
	display: inline-block;
304
			display: inline-block;
303
	width: 1em;
305
			width: 1em;
304
	color: #000000;
306
			color: #000000;
305
}
307
		}
  
308
	}
306
  
309
  
307
.tree-view details[open] > summary::before {
310
	details[open] > summary::before {
308
	content: "▾";
311
		content: "▾";
309
}
312
	}
310
  
  
311
.tree-view details {
  
312
	display: block;
  
313
}
313
}
314
  
314
  
315
.file-diffs {
315
.file-diffs {
...
432
}
432
}
433
  
433
  
434
.repository-languages {
434
.repository-languages {
435
	margin-bottom: -1em;
435
	.language-bar {
436
}
436
		margin-bottom: 0.5em;
  
437
	}
437
  
438
  
438
.language-bar {
439
	.language-list {
439
	margin-bottom: 0.5em;
440
		list-style: none;
440
}
441
		padding: 0;
  
442
		margin: 0;
  
443
		display: flex;
  
444
		flex-wrap: wrap;
  
445
		gap: 0.7em;
  
446
		font-size: small;
441
  
447
  
442
.language-list {
448
		li {
443
	list-style: none;
449
			display: flex;
444
	padding: 0;
450
			align-items: center;
445
	margin: 0;
451
			gap: 0.4em;
446
	display: flex;
452
			.language-color {
447
	flex-wrap: wrap;
453
				display: inline-block;
448
	gap: 1em;
454
				width: 8px;
449
	font-size: small;
455
				height: 8px;
450
}
456
				border-radius: 50%;
  
457
			}
451
  
458
  
452
.language-list li {
459
			.language-name {
453
	display: flex;
460
				font-weight: bold;
454
	align-items: center;
461
			}
455
	gap: 0.4em;
  
456
}
  
457
  
  
458
.language-color {
  
459
	display: inline-block;
  
460
	width: 8px;
  
461
	height: 8px;
  
462
	border-radius: 50%;
  
463
}
  
464
  
462
  
465
.language-name {
463
			.language-percentage {
466
	font-weight: bold;
464
				color: var(--fg-muted);
467
}
465
			}
468
  
466
		}
469
.language-percentage {
467
	}
470
	color: var(--fg-muted);
  
471
}
468
}
472
  
469
  
473
.footer {
470
.footer {
...
diff --git a/views/repository.html b/views/repository.html
...
40
					<tr>
40
					<tr>
41
						<th width="110">Date</th>
41
						<th width="110">Date</th>
42
						<th>Commit message</th>
42
						<th>Commit message</th>
43
						<th width="70"></th>
43
						<th width="80"></th>
44
						<th width="200">Author</th>
44
						<th width="200">Author</th>
45
						<th width="90" class="text-right">Lines</th>
45
						<th width="90" class="text-right">Lines</th>
46
					</tr>
46
					</tr>
...