css: fix article section highlighting for some components.

 * Non-inflated code blocks were mistakenly inflated in highlighted
   sections. Code blocks with additional classes were not inflated by
   mistake.
 * The content of blocks, frames and notes is now properly padded to
   align with the rest of the page and doesn't jump on highlight.
 * Inflated notes now have their left border colored when highlighted.

diff --git a/css/m-components.css b/css/m-components.css
index 5a689f4f19c7cfc6a7daeb94eec94a84aae344b8..f7078747c267660d70f5dfa244496a138aa51c06 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -333,12 +333,6 @@ article section:target {
   border-left-width: 0.25rem;
   padding-left: 0.75rem;
 }
-article section:target pre {
-  margin-left: -1.0rem;
-  border-left-style: solid;
-  border-left-width: 0.25rem;
-  padding-left: 0.75rem;
-}
 
 /* Jumbo article */
 article.m-jumbo, article.m-jumbo > header {
@@ -522,7 +516,7 @@ dl.m-diary dd {
   border-left-width: 0.25rem;
   border-radius: 0.2rem;
   border-color: var(--line-color);
-  padding: 1rem;
+  padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem;
 }
 
 /* Tables */
@@ -746,29 +740,72 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
 #m-container-inflatable > .m-row > [class*='m-col-'] > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > div > div > pre,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > .m-block,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > div > div > pre,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > .m-block,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > div > div > pre,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > .m-block,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > div > div > pre,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > .m-block,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > div > div > pre,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > .m-block,
-#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > div > pre {
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > div > pre,
+#m-container-inflatable > .m-row > [class*='m-col-'] > section > section > section > section > section > div > div > pre {
   margin: 0 -1rem 1rem -1rem;
 }
 
+/* Active sections in inflatable content affect left border of some components */
+#m-container-inflatable section:target pre,
+#m-container-inflatable section:target .m-note,
+#m-container-inflatable section:target .m-frame,
+#m-container-inflatable section:target .m-block {
+  margin-left: -1.0rem;
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.75rem;
+}
+#m-container-inflatable section:target pre {
+  border-color: var(--line-color);
+}
+#m-container-inflatable section:target .m-note.m-default {
+  border-left-color: var(--line-color);
+}
+#m-container-inflatable section:target .m-note.m-primary {
+  border-left-color: var(--primary-color);
+}
+#m-container-inflatable section:target .m-note.m-success {
+  border-left-color: var(--success-color);
+}
+#m-container-inflatable section:target .m-note.m-warning {
+  border-left-color: var(--warning-color);
+}
+#m-container-inflatable section:target .m-note.m-danger {
+  border-left-color: var(--danger-color);
+}
+#m-container-inflatable section:target .m-note.m-info {
+  border-left-color: var(--info-color);
+}
+#m-container-inflatable section:target .m-note.m-dim {
+  border-left-color: var(--dim-color);
+}
+
 /* Colored text */
 .m-text.m-default { color: var(--default-color); }
 .m-text.m-primary { color: var(--primary-color); }