@hackersheet/react-document-content-styles 0.1.0-alpha.10 → 0.1.0-alpha.12

package/dist/basic.module.css

@@ -84,7 +84,7 @@
 .main ol ul ul {
   list-style-type: square;
 }
-.main table:not(:global .gist-block table) {
+.main table:not(:global(.gist-block) table) {
   margin: 1.5rem 0;
   width: 100%;
   table-layout: fixed;
@@ -94,31 +94,31 @@
   border: 1px solid hsl(var(--hsdc-border));
   overflow: hidden;
 }
-.main table:not(:global .gist-block table) thead {
+.main table:not(:global(.gist-block) table) thead {
   background-color: hsl(var(--hsdc-muted));
 }
-.main table:not(:global .gist-block table) tbody td {
+.main table:not(:global(.gist-block) table) tbody td {
   border-top: 1px solid hsl(var(--hsdc-border));
 }
-.main table:not(:global .gist-block table) tbody tr:hover {
+.main table:not(:global(.gist-block) table) tbody tr:hover {
   background-color: hsl(var(--hsdc-muted)/0.5);
 }
-.main table:not(:global .gist-block table) th,
-.main table:not(:global .gist-block table) td {
+.main table:not(:global(.gist-block) table) th,
+.main table:not(:global(.gist-block) table) td {
   padding: 0.5rem;
   font-size: 0.875rem;
   text-align: left;
 }
-.main table:not(:global .gist-block table) th :global(&.left),
-.main table:not(:global .gist-block table) td :global(&.left) {
+.main table:not(:global(.gist-block) table) th:global(.left),
+.main table:not(:global(.gist-block) table) td:global(.left) {
   text-align: left;
 }
-.main table:not(:global .gist-block table) th :global(&.center),
-.main table:not(:global .gist-block table) td :global(&.center) {
+.main table:not(:global(.gist-block) table) th:global(.center),
+.main table:not(:global(.gist-block) table) td:global(.center) {
   text-align: center;
 }
-.main table:not(:global .gist-block table) th :global(&.right),
-.main table:not(:global .gist-block table) td :global(&.right) {
+.main table:not(:global(.gist-block) table) th:global(.right),
+.main table:not(:global(.gist-block) table) td:global(.right) {
   text-align: right;
 }
 .main del {
@@ -162,15 +162,15 @@
   background-color: hsl(var(--hsdc-muted)/0.5);
 }
 
-.main :global .heading:has(a) {
+.main :global(.heading):has(a) {
   padding: 0;
 }
-.main :global .heading a {
+.main :global(.heading) a {
   display: block;
   padding: 0.5rem 0;
   color: inherit;
 }
-.main :global .heading a .heading-link-icon {
+.main :global(.heading) a :global(.heading-link-icon) {
   margin-left: 0.5rem;
   display: none;
   line-height: 1.1;
@@ -179,19 +179,19 @@
   vertical-align: middle;
   color: hsl(var(--hsdc-muted-foreground));
 }
-.main :global .heading:hover .heading-link-icon {
+.main :global(.heading):hover :global(.heading-link-icon) {
   display: inline-block;
 }
-.main :global .footnotes {
+.main :global(.footnotes) {
   margin-top: 4rem;
   padding-top: 2rem;
   border-top: 1px solid hsl(var(--hsdc-border));
   color: hsl(var(--hsdc-muted-foreground));
 }
-.main :global .footnotes p {
+.main :global(.footnotes) p {
   margin: 0;
 }
-.main :global .footnotes .sr-only {
+.main :global(.footnotes) :global(.sr-only) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -202,39 +202,39 @@
   white-space: nowrap;
   border-width: 0;
 }
-.main :global .contains-task-list {
+.main :global(.contains-task-list) {
   list-style-type: none;
   padding-left: 0;
 }
-.main :global .contains-task-list input {
+.main :global(.contains-task-list) input {
   margin-right: 0.5rem;
 }
-.main :global .contains-task-list li:has(input:checked) {
+.main :global(.contains-task-list) li:has(input:checked) {
   text-decoration: line-through;
 }
-.main :global .react-tweet-theme {
+.main :global(.react-tweet-theme) {
   margin-left: auto;
   margin-right: auto;
 }
-.main :global .react-tweet-theme p {
+.main :global(.react-tweet-theme) p {
   margin: 0;
   line-height: 1.5;
   font-size: 1rem;
 }
-.main :global .code-block {
+.main :global(.code-block) {
   margin: 1.5rem 0;
   border: 1px solid hsl(var(--hsdc-border));
   border-radius: 0.25rem;
   overflow: hidden;
 }
-.main :global .code-block pre {
+.main :global(.code-block) pre {
   font-family: var(--hsdc-font-code);
   font-size: 0.875rem;
   padding: 1rem;
   overflow: auto;
   background-color: hsl(var(--hsdc-code-block));
 }
-.main :global .code-block .code-block-header {
+.main :global(.code-block) :global(.code-block-header) {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -245,20 +245,20 @@
   background-color: hsl(var(--hsdc-muted));
   border-bottom: 1px solid hsl(var(--hsdc-border));
 }
-.main :global .code-block .code-block-header > div {
+.main :global(.code-block) :global(.code-block-header) > div {
   display: flex;
   align-items: center;
   justify-items: center;
 }
-.main :global .code-block .code-block-filename {
+.main :global(.code-block) :global(.code-block-filename) {
   flex: 1 1 auto;
 }
-.main :global .shiki code {
+.main :global(.shiki) code {
   display: block;
   width: fit-content;
   min-width: 100%;
 }
-.main :global .shiki span.line {
+.main :global(.shiki) :global(span.line) {
   display: inline-block;
   position: relative;
   width: fit-content;
@@ -266,47 +266,47 @@
   margin: 0 -1rem;
   padding: 0 1rem;
 }
-.main :global .shiki span.line.highlighted {
+.main :global(.shiki) :global(span.line.highlighted) {
   background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.1) !important;
 }
-.main :global .shiki span.line.diff.add {
+.main :global(.shiki) :global(span.line.diff.add) {
   background-color: hsl(var(--hsdc-shiki-diff-add)/0.1) !important;
 }
-.main :global .shiki span.line.diff.add::before {
+.main :global(.shiki) :global(span.line.diff.add)::before {
   position: absolute;
   left: 2px;
   content: "+";
   color: hsl(var(--hsdc-shiki-diff-add));
 }
-.main :global .shiki span.line.diff.remove {
+.main :global(.shiki) :global(span.line.diff.remove) {
   background-color: hsl(var(--hsdc-shiki-diff-remove)/0.1) !important;
 }
-.main :global .shiki span.line.diff.remove::before {
+.main :global(.shiki) :global(span.line.diff.remove)::before {
   position: absolute;
   left: 2px;
   content: "-";
   color: hsl(var(--hsdc-shiki-diff-remove));
 }
-.main :global .shiki .highlighted-word {
+.main :global(.shiki) :global(.highlighted-word) {
   background-color: hsl(var(--hsdc-shiki-highlighted-word)/0.2);
   padding: 0.125rem 0;
   margin: -0.125rem 0;
 }
-.main :global .shiki .tab,
-.main :global .shiki .space {
+.main :global(.shiki) :global(.tab),
+.main :global(.shiki) :global(.space) {
   position: relative;
 }
-.main :global .shiki .tab::before {
+.main :global(.shiki) :global(.tab::before) {
   content: "⇥";
   position: absolute;
   opacity: 0.3;
 }
-.main :global .shiki .space::before {
+.main :global(.shiki) :global(.space::before) {
   content: "·";
   position: absolute;
   opacity: 0.3;
 }
-.main :global .link-card {
+.main :global(.link-card) {
   display: flex;
   flex-direction: row;
   border: 1px solid hsl(var(--hsdc-border));
@@ -317,11 +317,11 @@
   max-height: 144px;
   margin: 1.8rem 0;
 }
-.main :global .link-card:hover {
+.main :global(.link-card):hover {
   text-decoration: none;
   background-color: hsl(var(--hsdc-muted)/0.5);
 }
-.main :global .link-card .link-card-main {
+.main :global(.link-card) :global(.link-card-main) {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -329,41 +329,41 @@
   overflow: hidden;
   gap: 0.5rem;
 }
-.main :global .link-card .link-card-main .link-card-title,
-.main :global .link-card .link-card-main .link-card-description,
-.main :global .link-card .link-card-main .link-card-domain {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-title),
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-description),
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
 }
-.main :global .link-card .link-card-main .link-card-title-container {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) {
   flex: 1 1 auto;
 }
-.main :global .link-card .link-card-main .link-card-title-container .link-card-title {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
   font-size: 0.875rem;
   -webkit-line-clamp: 4;
   line-clamp: 4;
 }
 @media (min-width: 640px) {
-  .main :global .link-card .link-card-main .link-card-title-container .link-card-title {
+  .main :global(.link-card) :global(.link-card-main) :global(.link-card-title-container) :global(.link-card-title) {
     font-size: 1rem;
     -webkit-line-clamp: 2;
     line-clamp: 2;
   }
 }
-.main :global .link-card .link-card-main .link-card-description {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
   font-size: 0.75rem;
   display: none;
   color: hsl(var(--hsdc-muted-foreground));
 }
 @media (min-width: 640px) {
-  .main :global .link-card .link-card-main .link-card-description {
+  .main :global(.link-card) :global(.link-card-main) :global(.link-card-description) {
     display: -webkit-box;
   }
 }
-.main :global .link-card .link-card-main .link-card-domain {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -371,15 +371,15 @@
   font-size: 0.75rem;
   color: hsl(var(--hsdc-muted-foreground));
 }
-.main :global .link-card .link-card-main .link-card-domain > div {
+.main :global(.link-card) :global(.link-card-main) :global(.link-card-domain) > div {
   text-wrap: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.main :global .link-card .link-card-image {
+.main :global(.link-card) :global(.link-card-image) {
   width: 35%;
 }
-.main :global .link-card .link-card-image img {
+.main :global(.link-card) :global(.link-card-image) img {
   object-fit: contain;
   object-position: top;
   padding: 0.5rem;
@@ -387,104 +387,164 @@
   height: 100%;
 }
 @media (min-width: 640px) {
-  .main :global .link-card .link-card-image img {
+  .main :global(.link-card) :global(.link-card-image) img {
     object-fit: cover;
     object-position: center;
     padding: 0;
   }
 }
-.main :global .markdown-alert {
+.main :global(.markdown-alert) {
   padding: 0.5rem 1rem;
   margin-bottom: 1.8rem;
   border-left: 0.25em solid var(--github-alert-default-color);
 }
-.main :global .markdown-alert > :first-child {
+.main :global(.markdown-alert) > :first-child {
   margin-top: 0;
 }
-.main :global .markdown-alert > :nth-child(2) {
+.main :global(.markdown-alert) > :nth-child(2) {
   margin-top: 0.25rem;
 }
-.main :global .markdown-alert > :last-child {
+.main :global(.markdown-alert) > :last-child {
   margin-bottom: 0;
 }
-.main :global .markdown-alert .markdown-alert-title {
+.main :global(.markdown-alert) :global(.markdown-alert-title) {
   display: flex;
   margin-bottom: 0.25rem;
   align-items: center;
 }
-.main :global .markdown-alert .markdown-alert-title > svg {
+.main :global(.markdown-alert) :global(.markdown-alert-title) > svg {
   margin-right: 0.5rem;
 }
-.main :global .markdown-alert.markdown-alert-note {
+.main :global(.markdown-alert):global(.markdown-alert-note) {
   border-left-color: var(--github-alert-note-color);
 }
-.main :global .markdown-alert.markdown-alert-note .markdown-alert-title {
+.main :global(.markdown-alert):global(.markdown-alert-note) :global(.markdown-alert-title) {
   color: var(--github-alert-note-color);
 }
-.main :global .markdown-alert.markdown-alert-tip {
+.main :global(.markdown-alert):global(.markdown-alert-tip) {
   border-left-color: var(--github-alert-tip-color);
 }
-.main :global .markdown-alert.markdown-alert-tip .markdown-alert-title {
+.main :global(.markdown-alert):global(.markdown-alert-tip) :global(.markdown-alert-title) {
   color: var(--github-alert-tip-color);
 }
-.main :global .markdown-alert.markdown-alert-important {
+.main :global(.markdown-alert):global(.markdown-alert-important) {
   border-left-color: var(--github-alert-important-color);
 }
-.main :global .markdown-alert.markdown-alert-important .markdown-alert-title {
+.main :global(.markdown-alert):global(.markdown-alert-important) :global(.markdown-alert-title) {
   color: var(--github-alert-important-color);
 }
-.main :global .markdown-alert.markdown-alert-warning {
+.main :global(.markdown-alert):global(.markdown-alert-warning) {
   border-left-color: var(--github-alert-warning-color);
 }
-.main :global .markdown-alert.markdown-alert-warning .markdown-alert-title {
+.main :global(.markdown-alert):global(.markdown-alert-warning) :global(.markdown-alert-title) {
   color: var(--github-alert-warning-color);
 }
-.main :global .markdown-alert.markdown-alert-caution {
+.main :global(.markdown-alert):global(.markdown-alert-caution) {
   border-left-color: var(--github-alert-caution-color);
 }
-.main :global .markdown-alert.markdown-alert-caution .markdown-alert-title {
+.main :global(.markdown-alert):global(.markdown-alert-caution) :global(.markdown-alert-title) {
   color: var(--github-alert-caution-color);
 }
-.main :global .mermaid-block {
+.main :global(.mermaid-block) {
   margin: 1.5rem 0;
 }
-.main :global .mermaid-block svg {
+.main :global(.mermaid-block) svg {
   margin-right: auto;
   margin-left: auto;
 }
-.main :global .mermaid-block.mermaid-loading {
+.main :global(.mermaid-block):global(.mermaid-loading) {
   width: 100%;
   height: 8em;
   display: flex;
   justify-items: center;
   align-items: center;
 }
-.main :global .mermaid-block.mermaid-loading > div {
+.main :global(.mermaid-block):global(.mermaid-loading) > div {
   margin-left: auto;
   margin-right: auto;
 }
-.main :global .youtube-block {
+.main :global(.youtube-block) {
   margin: 1.5rem 0;
 }
-.main :global .youtube-block div > lite-youtube {
+.main :global(.youtube-block) div > lite-youtube {
   margin-right: auto;
   margin-left: auto;
 }
-.main :global .kifu-block {
+.main :global(.kifu-block) {
   margin: 1.5rem 0;
 }
-.main :global .kifu-block svg {
+.main :global(.kifu-block) svg {
   margin-right: auto;
   margin-left: auto;
 }
-.main :global .gist-block {
+.main :global(.gist-block) {
   margin: 1.5rem 0;
 }
-.main :global .gist-block .gist-file {
+.main :global(.gist-block) :global(.gist-file) {
   border-radius: 0.25rem;
   overflow: hidden;
   border: 1px solid hsl(var(--hsdc-border));
 }
-.main :global .gist-block .gist-file:last-child {
+.main :global(.gist-block) :global(.gist-file:last-child) {
   margin-bottom: 0;
 }
+.main :global(.directory-tree) {
+  font-family: var(--hsdc-font-code);
+  position: relative;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  list-style: none;
+}
+.main :global(.directory-tree) :global(.directory-tree-node-content) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+.main :global(.directory-tree) :global(.directory-tree-directory > .directory-tree-node-content) {
+  font-weight: 800;
+  color: hsl(var(--hsdc-muted-foreground));
+}
+.main :global(.directory-tree) ul {
+  padding-left: 5px;
+  list-style: none;
+  line-height: 1.5rem;
+}
+.main :global(.directory-tree) li {
+  line-height: 1.5rem;
+}
+.main :global(.directory-tree) ul li {
+  position: relative;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 15px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.main :global(.directory-tree) ul li:before {
+  position: absolute;
+  top: 15px;
+  left: 0;
+  width: 10px;
+  height: 1px;
+  margin: auto;
+  content: "";
+  background-color: #666;
+}
+.main :global(.directory-tree) ul li:after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  content: "";
+  background-color: #666;
+}
+.main :global(.directory-tree) ul li:last-child:after {
+  height: 15px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/react-document-content-styles",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.12",
   "description": "Hacker Sheet document content styles.",
   "keywords": [],
   "repository": {