chore(playground): update styles

basics · Sep 24, 2024 · 2cde378 · 2cde378
1 parent b3ea1bd
commit 2cde378
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -7,6 +7,7 @@
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
           dolore magna aliquyam…
         </p>
+        <pre class="structure-debug" data-debug-current-tag="header"></pre>
       </header>
       <DefaultContentContainer>
         <DefaultContentContainer>
@@ -65,6 +66,7 @@
       <ArticleContentContainer>
         <header>
           <DebugHeadline>Article Title</DebugHeadline>
+          <pre class="structure-debug" data-debug-current-tag="header"></pre>
         </header>
 
         <ArticleContentContainer>
@@ -154,11 +156,6 @@ h4 {
   font-size: calc(50px * var(--factor));
 }
 
-[data-debug] {
-  padding: 20px 10px;
-  margin: 20px 10px;
-}
-
 .columns-3 {
   display: flex;
   gap: 10px;

diff --git a/playground/src/style.css b/playground/src/style.css
@@ -51,7 +51,13 @@
 
 
 
-[data-debug="container"] {
+
+[data-debug], header {
+  padding: 20px 10px;
+  margin: 20px 10px;
+}
+
+[data-debug="container"], header {
   --color-structure-1-bg: #ff8360ff;
   --color-structure-1-fb: #333;
   --color-structure-2-bg: #e8e288ff;
@@ -62,6 +68,8 @@
   --color-structure-4-fb: #333;
   --color-structure-5-bg: #dbbbf5;
   --color-structure-5-fb: #333;
+  --color-structure-6-bg: #ccc;
+  --color-structure-6-fb: #333;
 
   position: relative;
 
@@ -94,12 +102,29 @@
       font-weight: bold;
       color: var(--tag-color-fg);
       pointer-events: none;
-      content: attr(data-debug-current-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-current-level);
       background: var(--tag-color-bg);
     }
+
+    &[data-debug-current-tag] {
+      &::after {
+        content: attr(data-debug-current-tag);
+      }
+    }
+
+    &[data-debug-current-tag][data-debug-parent-level][data-debug-current-level] {
+      &::after {
+        content: attr(data-debug-current-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-current-level);
+      }
+    }
   }
 }
 
+.structure-debug[data-debug-current-tag='header'] {
+  --tag-color-fg: var(--color-structure-6-fg);
+  --tag-color-bg: var(--color-structure-6-bg);
+
+}
+
 .structure-debug[data-debug-current-tag='article'] {
   --tag-color-fg: var(--color-structure-2-fg);
   --tag-color-bg: var(--color-structure-2-bg);