css: consistent gaps between blocks

nette · Sep 28, 2023 · 16fae24 · 16fae24
1 parent c85d5e1
commit 16fae24
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 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
@@ -2,23 +2,14 @@
  * This file is part of the Tracy (https://tracy.nette.org)
  */
 
-:root {
-	--tracy-space: 16px;
-}
-
-@media (max-width: 600px) {
-	:root {
-		--tracy-space: 8px;
-	}
-}
-
 html.tracy-bs-visible,
 html.tracy-bs-visible body {
 	display: block;
 	overflow: auto;
 }
 
 #tracy-bs {
+	--tracy-space: 16px;
 	font: 9pt/1.5 Verdana, sans-serif;
 	background: white;
 	color: #333;
@@ -30,6 +21,12 @@ html.tracy-bs-visible body {
 	text-align: left;
 }
 
+@media (max-width: 600px) {
+	#tracy-bs {
+		--tracy-space: 8px;
+	}
+}
+
 #tracy-bs a {
 	text-decoration: none;
 	color: #328ADC;
@@ -70,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;
@@ -92,7 +80,6 @@ html.tracy-bs-visible body {
 #tracy-bs h2 {
 	font-size: 14pt;
 	font-weight: normal;
-	margin-top: var(--tracy-space);
 }
 
 #tracy-bs h3 {
@@ -188,14 +175,12 @@ html.tracy-bs-visible body {
 
 
 #tracy-bs .tracy-section {
-	padding-left: calc(1.5 * var(--tracy-space));
-	padding-right: calc(1.5 * var(--tracy-space));
+	padding: var(--tracy-space);
 }
 
 #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;
@@ -216,7 +201,6 @@ html.tracy-bs-visible body {
 	background: #CD1818;
 	color: white;
 	font-size: 13pt;
-	padding-top: var(--tracy-space);
 }
 
 #tracy-bs .tracy-section--error h1 {

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;