css: don't highlight blocks/notes/frames/codeblocks that are not inflated.

This assumes that <section> elements are only part of an <article> and
nothing else.

diff --git a/css/m-components.css b/css/m-components.css
index fcdea163abde25539a79319a6ee6b3aab8b4ccba..c699f094d833077e8f347f62a8fea295f5e670a0 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -749,39 +749,25 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
 #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 > 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 {
   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 {
+#m-container-inflatable section:target > .m-note,
+#m-container-inflatable section:target > .m-frame,
+#m-container-inflatable section:target > .m-block,
+#m-container-inflatable section:target > div > pre,
+#m-container-inflatable section:target > div > div > pre
+#m-container-inflatable section:target section > .m-note,
+#m-container-inflatable section:target section > .m-frame,
+#m-container-inflatable section:target section > .m-block,
+#m-container-inflatable section:target section > div > pre,
+#m-container-inflatable section:target section > div > div > pre {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -789,28 +775,38 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
   border-bottom-left-radius: 0;
   padding-left: 0.75rem;
 }
-#m-container-inflatable section:target pre {
+#m-container-inflatable section:target > div > pre,
+#m-container-inflatable section:target > div > div > pre,
+#m-container-inflatable section:target section > div > pre,
+#m-container-inflatable section:target section > div > div > pre {
   border-color: var(--line-color);
 }
-#m-container-inflatable section:target .m-note.m-default {
+#m-container-inflatable section:target > .m-note.m-default,
+#m-container-inflatable section:target section > .m-note.m-default {
   border-left-color: var(--line-color);
 }
-#m-container-inflatable section:target .m-note.m-primary {
+#m-container-inflatable section:target > .m-note.m-primary,
+#m-container-inflatable section:target section > .m-note.m-primary {
   border-left-color: var(--primary-color);
 }
-#m-container-inflatable section:target .m-note.m-success {
+#m-container-inflatable section:target > .m-note.m-success,
+#m-container-inflatable section:target section > .m-note.m-success {
   border-left-color: var(--success-color);
 }
-#m-container-inflatable section:target .m-note.m-warning {
+#m-container-inflatable section:target > .m-note.m-warning,
+#m-container-inflatable section:target section > .m-note.m-warning {
   border-left-color: var(--warning-color);
 }
-#m-container-inflatable section:target .m-note.m-danger {
+#m-container-inflatable section:target > .m-note.m-danger,
+#m-container-inflatable section:target section > .m-note.m-danger {
   border-left-color: var(--danger-color);
 }
-#m-container-inflatable section:target .m-note.m-info {
+#m-container-inflatable section:target > .m-note.m-info,
+#m-container-inflatable section:target section > .m-note.m-info {
   border-left-color: var(--info-color);
 }
-#m-container-inflatable section:target .m-note.m-dim {
+#m-container-inflatable section:target > .m-note.m-dim,
+#m-container-inflatable section:target section > .m-note.m-dim {
   border-left-color: var(--dim-color);
 }