css: consistent gaps between blocks

nette · Sep 28, 2023 · 5fab51e · 5fab51e
1 parent a46c32a
commit 5fab51e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/src/Tracy/Bar/assets/bar.css b/src/Tracy/Bar/assets/bar.css
@@ -4,6 +4,7 @@
 
 /* common styles */
 #tracy-debug {
+	--tracy-space: 10px;
 	display: none;
 	direction: ltr;
 }
@@ -29,11 +30,6 @@ body#tracy-debug { /* in popup window */
 	color: white;
 }
 
-#tracy-debug h2,
-#tracy-debug h3,
-#tracy-debug p {
-	margin: .4em 0;
-}
 
 #tracy-debug table {
 	background: #FDF5CE;
@@ -183,7 +179,7 @@ body#tracy-debug .tracy-panel { /* in popup window */
 #tracy-debug h1 {
 	font: normal normal 23px/1.4 Tahoma, sans-serif;
 	color: #575753;
-	margin: -5px -5px 5px;
+	margin: -5px -5px var(--tracy-space);
 	padding: 0 5px 0 5px;
 	word-wrap: break-word;
 }
@@ -213,7 +209,7 @@ body#tracy-debug .tracy-panel { /* in popup window */
 #tracy-debug .tracy-mode-float {
 	position: fixed;
 	flex-direction: column;
-	padding: 10px;
+	padding: var(--tracy-space);
 	min-width: 200px;
 	min-height: 80px;
 	border-radius: 5px;
@@ -267,7 +263,7 @@ body#tracy-debug .tracy-panel { /* in popup window */
 }
 
 #tracy-debug .tracy-mode-window {
-	padding: 10px;
+	padding: var(--tracy-space);
 }
 
 #tracy-debug .tracy-icons a {
@@ -282,8 +278,21 @@ body#tracy-debug .tracy-panel { /* in popup window */
 #tracy-debug .tracy-inner-container {
 	min-width: 100%;
 	float: left;
+	/* explicit gaps: */
+	display: flex;
+	flex-direction: column;
+	gap: var(--tracy-space);
+}
+
+#tracy-debug .tracy-inner-container > * {
+	margin-bottom: 0; /* disable implicit gaps */
+}
+
+#tracy-debug .tracy-inner-container:not(:last-child) {
+	margin-bottom: var(--tracy-space);
 }
 
+
 @media print {
 	#tracy-debug * {
 		display: none;

diff --git a/src/Tracy/BlueScreen/assets/bluescreen.css b/src/Tracy/BlueScreen/assets/bluescreen.css
@@ -67,15 +67,6 @@ html.tracy-bs-visible body {
 	display: none;
 }
 
-#tracy-bs p,
-#tracy-bs table,
-#tracy-bs pre,
-#tracy-bs h1,
-#tracy-bs h2,
-#tracy-bs h3 {
-	margin: 0 0 var(--tracy-space);
-}
-
 #tracy-bs h1 {
 	font-size: 15pt;
 	font-weight: normal;
@@ -189,8 +180,7 @@ html.tracy-bs-visible body {
 
 #tracy-bs .tracy-section-panel {
 	background: #F4F3F1;
-	padding: var(--tracy-space) var(--tracy-space) 0;
-	margin: 0 0 var(--tracy-space);
+	padding: var(--tracy-space);
 	border-radius: 8px;
 	box-shadow: inset 1px 1px 0px 0 #00000005;
 	overflow: hidden;
@@ -201,6 +191,10 @@ html.tracy-bs-visible body {
 	overflow: auto;
 }
 
+#tracy-bs .tracy-pane:not(:last-child) {
+	margin-bottom: var(--tracy-space);
+}
+
 #tracy-bs.tracy-mac .tracy-pane {
 	padding-bottom: 12px;
 }
@@ -215,7 +209,6 @@ html.tracy-bs-visible body {
 
 #tracy-bs .tracy-section--error h1 {
 	color: white;
-	margin: 0;
 }
 
 #tracy-bs .tracy-section--error::selection,
@@ -351,6 +344,10 @@ html.tracy-bs-visible body {
 	grid-column-end: 3;
 }
 
+#tracy-bs .tracy-callstack-additional:not(:last-child) {
+	margin-bottom: var(--tracy-space);
+}
+
 #tracy-bs .tracy-callstack-args tr:first-child > * {
 	position: relative;
 }

diff --git a/src/Tracy/assets/reset.css b/src/Tracy/assets/reset.css
@@ -46,6 +46,15 @@ tracy-div:not(a b) *:after {
 	all: unset;
 }
 
+tracy-div:not(a b) :is(
+	h1, h2, h3, h4, h5, h6,
+	p,
+	ol, ul, dl,
+	pre, table, hr,
+):where(:not(:last-child)) {
+	margin-bottom: var(--tracy-space);
+}
+
 tracy-div:not(a b) b,
 tracy-div:not(a b) strong {
 	font-weight: bold;