@jaisocx/css-code-snippet 1.3.3 → 1.3.5

package/MediaAndStyles/CssCodeSnippet_main.css

@@ -65,6 +65,8 @@
   border: var(--code-snippet-tool--border-width) var(--code-snippet-tool--border-style) var(--code-snippet-tool--border-color);
 }
 
+
+
 /* the overlapping placeholder, to cover the text near right border,
 to draw right margin, when the width is scrollable to right. */
 .jsx .CodeSnippetHolder::after {

package/MediaAndStyles/CssCodeSnippet_main_Webpack.css

@@ -1,7 +1,6 @@
 
 /* @import url("@CssCodeSnippet_MediaAndStyles/responsive_size_Constants.css"); */
-
-@import url("@CssCodeSnippet_MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css");
+/* @import url("@CssCodeSnippet_MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"); */
 /* @import url("@CssCodeSnippet_MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-300.css"); */
 
 

package/MediaAndStyles/CssCodeSnippet_main_relative.css

@@ -1,7 +1,7 @@
 
 /* @import url("./responsive_size_Constants.css"); */
 
-@import url("./lines-numbers-variables/code-snippet-lines-numbers-99.css");
+/* @import url("./lines-numbers-variables/code-snippet-lines-numbers-99.css"); */
 /* @import url("./lines-numbers-variables/code-snippet-lines-numbers-300.css"); */
 
 

package/MediaAndStyles/CssCodeSnippet_main_resolved.css

@@ -1,26 +1,31 @@
 
 
 
-.CodeSnippetHolder {
-  --lines-numbers--content--99: "\0031\00a\0032\00a\0033\00a\0034\00a\0035\00a\0036\00a\0037\00a\0038\00a\0039\00a\0031\0030\00a\0031\0031\00a\0031\0032\00a\0031\0033\00a\0031\0034\00a\0031\0035\00a\0031\0036\00a\0031\0037\00a\0031\0038\00a\0031\0039\00a\0032\0030\00a\0032\0031\00a\0032\0032\00a\0032\0033\00a\0032\0034\00a\0032\0035\00a\0032\0036\00a\0032\0037\00a\0032\0038\00a\0032\0039\00a\0033\0030\00a\0033\0031\00a\0033\0032\00a\0033\0033\00a\0033\0034\00a\0033\0035\00a\0033\0036\00a\0033\0037\00a\0033\0038\00a\0033\0039\00a\0034\0030\00a\0034\0031\00a\0034\0032\00a\0034\0033\00a\0034\0034\00a\0034\0035\00a\0034\0036\00a\0034\0037\00a\0034\0038\00a\0034\0039\00a\0035\0030\00a\0035\0031\00a\0035\0032\00a\0035\0033\00a\0035\0034\00a\0035\0035\00a\0035\0036\00a\0035\0037\00a\0035\0038\00a\0035\0039\00a\0036\0030\00a\0036\0031\00a\0036\0032\00a\0036\0033\00a\0036\0034\00a\0036\0035\00a\0036\0036\00a\0036\0037\00a\0036\0038\00a\0036\0039\00a\0037\0030\00a\0037\0031\00a\0037\0032\00a\0037\0033\00a\0037\0034\00a\0037\0035\00a\0037\0036\00a\0037\0037\00a\0037\0038\00a\0037\0039\00a\0038\0030\00a\0038\0031\00a\0038\0032\00a\0038\0033\00a\0038\0034\00a\0038\0035\00a\0038\0036\00a\0038\0037\00a\0038\0038\00a\0038\0039\00a\0039\0030\00a\0039\0031\00a\0039\0032\00a\0039\0033\00a\0039\0034\00a\0039\0035\00a\0039\0036\00a\0039\0037\00a\0039\0038\00a\0039\0039\00a";
-}
 
 
 
 
 
-.jsx .CodeSnippetHolder.css_clean_start_2__color_theme {
-  --code-snippet--theme-color: var(--jsx--css-clean-start-2--body-tag--background);
-  --code-snippet--background-color: var(--jsx--css-clean-start-2--site--background);
 
 
-  --code-snippet--text-color: var(--jsx--css-clean-start-2--all-tags--color);
 
-  --code-snippet-tool--border-color: var(--jsx--css-clean-start-2--all-tags--border-color);
 
-  --code_snippet__column_numbers__text-color: var(--jsx--css-clean-start-2--all-tags--border-color);
-  --code_snippet__column_numbers__background-color: var(--jsx--css-clean-start-2--body-tag--background);
-}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -44,6 +49,28 @@
 
 }
 
+
+
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.blue::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.blue::-webkit-scrollbar-thumb {
+    background-color: steelblue;
+  }
+
+  .jsx .CodeSnippetHolder.blue::-webkit-scrollbar-track {
+    background: #fafaff;
+  }
+
+}
+
+
+
+
 .jsx.rosa,
 .jsx .rosa,
 .CodeSnippetHolder.rosa {
@@ -64,6 +91,28 @@
 
 }
 
+
+
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar-thumb {
+    background-color: magenta;
+  }
+
+  .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar-track {
+    background: #fffafa;
+  }
+
+}
+
+
+
+
 .jsx.salad,
 .jsx .salad,
 .CodeSnippetHolder.salad {
@@ -85,6 +134,27 @@
 
 
 
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.salad::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.salad::-webkit-scrollbar-thumb {
+    background-color: lime;
+  }
+
+  .jsx .CodeSnippetHolder.salad::-webkit-scrollbar-track {
+    background: #fefffe;
+  }
+
+}
+
+
+
+
+
 
 .CodeSnippetHolder.large {
 
@@ -104,6 +174,10 @@
   
 }
 
+
+
+
+.CodeSnippetHolder,
 .CodeSnippetHolder.little {
 
   
@@ -123,15 +197,13 @@
 }
 
 
-.jsx .CssCodeSnippet {
-
-  --lines-numbers--content: var(--lines-numbers--content--99);
-
 
 
-  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, "Franklin Gothic Medium";
+.jsx .CssCodeSnippet {
 
+  --lines-numbers--content: var(--lines-numbers--content--99);
 
+  --code-snippet-tool--overflow-y: auto;
 
   
   
@@ -149,8 +221,7 @@
   
   --lines-numbers--content: var(--lines-numbers--content--99);
 
-
-  --code_snippet__font_family: Courier;
+  --code_snippet__font_family: var(--css-clean-start-2--monospace--font-family) Courier, "Courier New", Menlo, Consolas, 'Liberation Mono';
 
   
   
@@ -189,15 +260,102 @@
 
 
 
-@media only screen and (min-width: 2px) and (max-width: 239px) and (min-height: 2px) and (max-height: 99999px) and (orientation: portrait) {
 
-  .jsx .CssCodeSnippet {
-    --theme_name: CssCodeSnippet__theme_base;
-    --theme_name__CssCodeSnippet: theme_base;
-    --responsive_size: responsive_size_d05_very_small_xxs_portrait;
-    --responsive_size__CssCodeSnippet__theme_base: responsive_size_d05_very_small_xxs_portrait__CssCodeSnippet__theme_base;
-  }
-}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 @media only screen and (min-width: 2px) and (max-width: 99999px) and (min-height: 2px) and (max-height: 239px) and (orientation: landscape) {
 
@@ -210,6 +368,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 240px) and (max-width: 320px) and (min-height: 240px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -220,6 +380,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 240px) and (max-width: 99999px) and (min-height: 240px) and (max-height: 320px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -231,6 +394,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 321px) and (max-width: 375px) and (min-height: 321px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -241,6 +406,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 321px) and (max-width: 99999px) and (min-height: 321px) and (max-height: 375px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -252,6 +420,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 376px) and (max-width: 430px) and (min-height: 376px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -262,6 +432,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 376px) and (max-width: 99999px) and (min-height: 376px) and (max-height: 430px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -273,6 +446,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 431px) and (max-width: 480px) and (min-height: 431px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -283,6 +458,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 431px) and (max-width: 99999px) and (min-height: 431px) and (max-height: 480px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -294,6 +472,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 481px) and (max-width: 767px) and (min-height: 481px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -304,6 +484,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 481px) and (max-width: 99999px) and (min-height: 481px) and (max-height: 767px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -315,6 +498,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -325,6 +510,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -336,6 +524,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1025px) and (max-height: 1194px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -346,6 +536,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1194px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -357,6 +550,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1195px) and (max-height: 99999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -367,6 +562,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1195px) and (max-width: 99999px) and (min-height: 768px) and (max-height: 1024px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -378,6 +576,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -388,6 +588,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1365px) and (min-height: 1025px) and (max-height: 1365px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -399,6 +602,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1440px) and (min-height: 1366px) and (max-height: 1440px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -409,6 +614,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1366px) and (max-width: 1440px) and (min-height: 1025px) and (max-height: 1440px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -420,6 +628,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1600px) and (min-height: 1441px) and (max-height: 1600px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -430,6 +640,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1441px) and (max-width: 1600px) and (min-height: 1025px) and (max-height: 1600px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -441,6 +654,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 1920px) and (min-height: 1601px) and (max-height: 1920px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -451,6 +666,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1601px) and (max-width: 1920px) and (min-height: 1025px) and (max-height: 1920px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -462,6 +680,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 2560px) and (min-height: 1921px) and (max-height: 2560px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -472,6 +692,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 1921px) and (max-width: 2560px) and (min-height: 1025px) and (max-height: 2560px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -483,6 +706,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 3840px) and (min-height: 2561px) and (max-height: 3840px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -493,6 +718,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 2561px) and (max-width: 3840px) and (min-height: 1025px) and (max-height: 3840px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -504,6 +732,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 7680px) and (min-height: 3841px) and (max-height: 7680px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -514,6 +744,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 3841px) and (max-width: 7680px) and (min-height: 1025px) and (max-height: 7680px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -525,6 +758,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 15360px) and (min-height: 7681px) and (max-height: 15360px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -535,6 +770,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 7681px) and (max-width: 15360px) and (min-height: 1025px) and (max-height: 15360px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -546,6 +784,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 25360px) and (min-height: 15361px) and (max-height: 25360px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -556,6 +796,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 15361px) and (max-width: 25360px) and (min-height: 1025px) and (max-height: 25360px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -567,6 +810,8 @@
 }
 
 
+
+
 @media only screen and (min-width: 1025px) and (max-width: 999999px) and (min-height: 25361px) and (max-height: 999999px) and (orientation: portrait) {
 
   .jsx .CssCodeSnippet {
@@ -577,6 +822,9 @@
   }
 }
 
+
+
+
 @media only screen and (min-width: 25361px) and (max-width: 999999px) and (min-height: 1025px) and (max-height: 999999px) and (orientation: landscape) {
 
   .jsx .CssCodeSnippet {
@@ -591,6 +839,11 @@
 
 
 
+
+
+
+
+
 @media (max-width: 440px) {
   .jsx .CodeSnippetHolder {
     max-width: 93vw;
@@ -656,6 +909,8 @@
 }
 
 
+
+
 .jsx .CodeSnippetHolder::after {
   content: "";
 
@@ -734,3 +989,6 @@
   color: var(--code-snippet--text-color);
   background-color: var(--code-snippet--background-color);
 }
+
+
+

package/MediaAndStyles/CssCodeSnippet_main_resolved_minimal.css

@@ -9,18 +9,10 @@
 
 
 
-.jsx .CodeSnippetHolder.css_clean_start_2__color_theme {
-  --code-snippet--theme-color: var(--jsx--css-clean-start-2--body-tag--background);
-  --code-snippet--background-color: var(--jsx--css-clean-start-2--site--background);
 
 
-  --code-snippet--text-color: var(--jsx--css-clean-start-2--all-tags--color);
 
-  --code-snippet-tool--border-color: var(--jsx--css-clean-start-2--all-tags--border-color);
 
-  --code_snippet__column_numbers__text-color: var(--jsx--css-clean-start-2--all-tags--border-color);
-  --code_snippet__column_numbers__background-color: var(--jsx--css-clean-start-2--body-tag--background);
-}
 
 
 
@@ -36,15 +28,15 @@
 
 
 
-.jsx .CssCodeSnippet {
 
-  --lines-numbers--content: var(--lines-numbers--content--99);
 
 
 
-  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, "Franklin Gothic Medium";
+.jsx .CssCodeSnippet {
 
+  --lines-numbers--content: var(--lines-numbers--content--99);
 
+  --code-snippet-tool--overflow-y: auto;
 
   
   
@@ -62,8 +54,7 @@
   
   --lines-numbers--content: var(--lines-numbers--content--99);
 
-
-  --code_snippet__font_family: Courier;
+  --code_snippet__font_family: var(--css-clean-start-2--monospace--font-family) Courier, "Courier New", Menlo, Consolas, 'Liberation Mono';
 
   
   
@@ -104,8 +95,6 @@
 
 
 
-
-
 @media (max-width: 440px) {
   .jsx .CodeSnippetHolder {
     max-width: 93vw;
@@ -171,6 +160,8 @@
 }
 
 
+
+
 .jsx .CodeSnippetHolder::after {
   content: "";
 
@@ -249,3 +240,6 @@
   color: var(--code-snippet--text-color);
   background-color: var(--code-snippet--background-color);
 }
+
+
+

package/MediaAndStyles/themes/color_themes/csstool-codesnippet-theme-colour-blue.css

@@ -18,3 +18,22 @@
   --code_snippet__column_numbers__background-color: #cef;
 
 }
+
+
+
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.blue::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.blue::-webkit-scrollbar-thumb {
+    background-color: steelblue;
+  }
+
+  .jsx .CodeSnippetHolder.blue::-webkit-scrollbar-track {
+    background: #fafaff;
+  }
+
+}

package/MediaAndStyles/themes/color_themes/csstool-codesnippet-theme-colour-rosa.css

@@ -18,3 +18,22 @@
   --code_snippet__column_numbers__background-color: white;
 
 }
+
+
+
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar-thumb {
+    background-color: magenta;
+  }
+
+  .jsx .CodeSnippetHolder.rosa::-webkit-scrollbar-track {
+    background: #fffafa;
+  }
+
+}

package/MediaAndStyles/themes/color_themes/csstool-codesnippet-theme-colour-salad.css

@@ -20,3 +20,21 @@
 
 
 
+@supports selector(::-webkit-scrollbar) {
+
+  .jsx .CodeSnippetHolder.salad::-webkit-scrollbar {
+    width: 0.4rem;
+    height: 0.4rem;
+  }
+
+   .jsx .CodeSnippetHolder.salad::-webkit-scrollbar-thumb {
+    background-color: lime;
+  }
+
+  .jsx .CodeSnippetHolder.salad::-webkit-scrollbar-track {
+    background: #fefffe;
+  }
+
+}
+
+

package/MediaAndStyles/themes/layout_themes/csstool-codesnippet-theme-size-little.css

@@ -1,4 +1,5 @@
 /* tool variables */
+.CodeSnippetHolder,
 .CodeSnippetHolder.little {
 
   /* theme variables */

package/MediaAndStyles/themes/theme_base/CssCodeSnippet_theme_base_main.css

@@ -3,11 +3,7 @@
 
   --lines-numbers--content: var(--lines-numbers--content--99);
 
-
-
-  --jsx--css-clean-start-2--all-tags--font-family: LibreFranklin, "Franklin Gothic Medium";
-
-
+  --code-snippet-tool--overflow-y: auto;
 
   /* base theme css var assignment example */
   /* --jsx--CssCodeSnippet--toolHtmlElement--font-size: 1rem; */
@@ -25,7 +21,7 @@
   /* when the MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css file is in the .html page,
       then the css variable --lines-numbers--content--99 is loaded.
 
-      file: workspace/ts/www/sites_tools/css_tools/CssCodeSnippet/MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-300.css
+      file: workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCodeSnippet/MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-300.css
       contains css vriable --lines-numbers--content--300
 
       CssCodeSnippetHelpers js class in file transpiled/Simple/CssCodeSnippetHelpers.js
@@ -34,8 +30,7 @@
    */
   --lines-numbers--content: var(--lines-numbers--content--99);
 
-
-  --code_snippet__font_family: Courier;
+  --code_snippet__font_family: var(--css-clean-start-2--monospace--font-family) Courier, "Courier New", Menlo, Consolas, 'Liberation Mono';
 
   /* code snippet tool borders */
   /* by color */

package/README.md

@@ -15,5 +15,5 @@ Jaisocx Company
 
 
 ### Css Code Snippet
-[https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCodeSnippet](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/www/sites_tools/css_tools/CssCodeSnippet)
+[https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCodeSnippet](https://github.com/Jaisocx-Tools/Workspace/tree/main/workspace/ts/Jaisocx_SitesTools/sites_tools/css_tools/CssCodeSnippet)
 

package/{css_code_snippet.example.html → dev_css_code_snippet__preview.html}

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx theme_visible_height">
+<html lang="en" class="jsx theme_visible_height theme_darkmode">
 <head>
 
   <title>CssCodeSnippet</title>
@@ -30,32 +30,6 @@
 
 
 
-    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
-    />
-
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
-    />
-
-    <!--# CSS FOR FONTS -->
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
-    />
-
-
-
     <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
 
     <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
@@ -80,9 +54,15 @@
 
 
 
-
-
     <!--# STYLES CssCodeSnippet and theme_base -->
+    <link
+        fetchpriority="medium"
+        rel="stylesheet"
+        type="text/css"
+        charset="utf-8"
+        href="MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"
+    />
+
     <link
       fetchpriority="medium"
       rel="stylesheet"
@@ -237,18 +217,18 @@
         /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
         on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
         --lines-numbers--content: var(--lines-numbers--content--99);
-
         --lines-number: 29;
       }
 
       .jsx .CodeSnippetHolder#code-snippet-example {
-        --code-snippet-tool--width:  max-content;
+        --code-snippet-tool--width: fit-content;
+        --code-snippet-tool--overflow-y: auto;
       }
 
       .jsx .CodeSnippetHolder#code-snippet-example-thin {
         --code-snippet-tool--width:  28rem;
         --code-snippet-tool--height: 22rem;
-        --overflow-y: auto;
+        --code-snippet-tool--overflow-y: auto;
       }
 
     </style>
@@ -263,20 +243,18 @@
 
         <h1>Css Code Snippet</h1>
         <h2>@jaisocx/css-code-snippet</h2>
-        <h3>css_code_snippet.example.html</h3>
+        <h3> dev_css_code_snippet__preview.html </h3>
         <description>Css sites tool rendering code blocks with numbered code rows</description>
 
 
 
         <ThemeButtons>
-          <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
           <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
           <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
         </ThemeButtons>
 
 
-
-        <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder css_clean_start_2__color_theme little">
+        <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder little salad">
           <pre class="CodeSnippetArea">
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
@@ -325,12 +303,7 @@ describe('AppComponent', () => {
 
 
 
-  <script
-    async="true"
-    defer="true"
-    charset="utf-8"
-    type="text/javascript"
-  >
+  <script>
 
     let currentButtonNodeClicked = null;
 
@@ -381,7 +354,7 @@ describe('AppComponent', () => {
     function addThemeButtonsEventHandlers() {
 
       const buttonsIDs = [
-        "button-turn-on-base-theme",
+//        "button-turn-on-base-theme",
         "button-turn-on-daymode",
         "button-turn-on-nightmode"
       ];

package/{index.example.html → index.preview.html}

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="jsx theme_visible_height">
+<html lang="en" class="jsx theme_visible_height theme_darkmode">
 <head>
 
   <title>CssCodeSnippet</title>
@@ -30,32 +30,6 @@
 
 
 
-    <!--# FONTS PRELOAD WITHOUT JAVASCRIPT CALL -->
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-SemiBold.ttf"
-    />
-
-    <link
-      fetchpriority="high"
-      rel="preload"
-      as="font"
-      type="font/ttf"
-      href="https://sandbox.brightday.email/cdn/www/fonts/LibreFranklin/static/LibreFranklin-Regular.ttf"
-    />
-
-    <!--# CSS FOR FONTS -->
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://sandbox.brightday.email/cdn/www/fonts_css/font_LibreFranklin_cdn.css"
-    />
-
-
-
     <!--# CSS CLEAN START 2: html & css WHEN STARTING A SITE FROM SCRATCH -->
 
     <!--# importing @jaisocx/css-clean-start-2 IN DEV MODE, TO RESEARCH THE .css STYLES IN BROWSER'S DEV TOOLS IN NETWORKS TAB  -->
@@ -80,14 +54,21 @@
 
 
 
-
-
     <!--# STYLES CssCodeSnippet and theme_base -->
     <link
+        fetchpriority="medium"
+        rel="stylesheet"
+        type="text/css"
+        charset="utf-8"
+        href="MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css"
+    />
+
+    <link
+      fetchpriority="medium"
       rel="stylesheet"
       type="text/css"
       charset="utf-8"
-      href="MediaAndStyles/CssCodeSnippet_main_relative.css"
+      href="MediaAndStyles/CssCodeSnippet_main_resolved.css"
     />
 
 
@@ -236,18 +217,18 @@
         /* when a .css is loaded with hardcoded lines numbers in code-snippet-lines-numbers-99.css
         on path MediaAndStyles/lines-numbers-variables/code-snippet-lines-numbers-99.css */
         --lines-numbers--content: var(--lines-numbers--content--99);
-
         --lines-number: 29;
       }
 
       .jsx .CodeSnippetHolder#code-snippet-example {
-        --code-snippet-tool--width:  max-content;
+        --code-snippet-tool--width: fit-content;
+        --code-snippet-tool--overflow-y: auto;
       }
 
       .jsx .CodeSnippetHolder#code-snippet-example-thin {
         --code-snippet-tool--width:  28rem;
         --code-snippet-tool--height: 22rem;
-        --overflow-y: auto;
+        --code-snippet-tool--overflow-y: auto;
       }
 
     </style>
@@ -262,20 +243,18 @@
 
         <h1>Css Code Snippet</h1>
         <h2>@jaisocx/css-code-snippet</h2>
-        <h3>css_code_snippet.example.html</h3>
+        <h3> index.preview.html </h3>
         <description>Css sites tool rendering code blocks with numbered code rows</description>
 
 
 
         <ThemeButtons>
-          <button id="button-turn-on-base-theme" data-theme="">Base Theme</button>
           <button id="button-turn-on-daymode" data-theme="theme_lightmode">Day Mode</button>
           <button id="button-turn-on-nightmode" data-theme="theme_darkmode">Night Mode</button>
         </ThemeButtons>
 
 
-
-        <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder css_clean_start_2__color_theme little">
+        <CodeSnippetHolder id="code-snippet-example" class="CodeSnippetHolder little salad">
           <pre class="CodeSnippetArea">
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
@@ -324,12 +303,7 @@ describe('AppComponent', () => {
 
 
 
-  <script
-    async="true"
-    defer="true"
-    charset="utf-8"
-    type="text/javascript"
-  >
+  <script>
 
     let currentButtonNodeClicked = null;
 
@@ -380,7 +354,7 @@ describe('AppComponent', () => {
     function addThemeButtonsEventHandlers() {
 
       const buttonsIDs = [
-        "button-turn-on-base-theme",
+//        "button-turn-on-base-theme",
         "button-turn-on-daymode",
         "button-turn-on-nightmode"
       ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jaisocx/css-code-snippet",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Css sites tool rendering code blocks with numbered code rows",
   "author": "Jaisocx Company",
   "keywords": [
@@ -8,8 +8,8 @@
     "styles"
   ],
   "files": [
-    "index.example.html",
-    "css_code_snippet.example.html",
+    "index.preview.html",
+    "dev_css_code_snippet__preview.html",
 
     "MediaAndStyles",
 
@@ -40,7 +40,7 @@
     }
   },
   "dependencies": {
-    "@jaisocx/css-clean-start-2": "~1.1.5"
+    "@jaisocx/css-clean-start-2": "~1.1.10"
   }
 }