@pb33f/cowboy-components 0.0.7 → 0.0.8

package/dist/css/cowboy-components.css

@@ -0,0 +1,393 @@
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--background-color);
+    font-family: var(--font-stack), monospace;
+    color: var(--font-color);
+    word-spacing: var(--global-font-spacing);
+    font-size: var(--font-size);
+    --sl-panel-background-color: var(--background-color);
+    --sl-input-background-color: var(--background-color);
+    --sl-input-border-color: var(--secondary-color);
+    padding: 0;
+    margin: 0;
+}
+
+main {
+    padding: var(--global-padding);
+    margin: 0 auto;
+}
+
+a, a:visited, a:active {
+    text-decoration: none;
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), monospace;
+    font-weight: normal
+}
+
+a:hover {
+    color: var(--primary-color);
+    text-decoration: underline;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body::-webkit-scrollbar {
+    width: 8px;
+}
+
+body::-webkit-scrollbar-track {
+    background-color: black;
+}
+
+body::-webkit-scrollbar-thumb {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background: var(--secondary-color-lowalpha);
+    padding: var(--global-padding);
+}
+
+
+p {
+    line-height: var(--global-line-height);
+    margin-bottom: 30px;
+    font-family: var(--font-stack-paragraph), monospace;
+    display: inherit;
+}
+
+code, pre {
+    font-family: var(--font-stack), monospace;
+    border: 1px solid var(--secondary-color-lowalpha);
+    color: var(--secondary-color);
+    border-radius: 0;
+    padding: 0 5px 1px 5px;
+    background-color: var(--secondary-color-very-lowalpha);
+    vertical-align: top;
+}
+
+footer {
+    padding: var(--footer-padding);
+    width: 100vw;
+    font-size: var(--footer-font-size);
+    height: var(--footer-height);
+    position: fixed;
+    bottom: 0;
+    background-color: var(--background-color);
+    border-top: 1px dashed var(--secondary-color);
+}
+
+footer > .generated-timestamp {
+    float: right;
+    margin-right: var(--global-padding);
+    font-weight: normal;
+    color: var(--font-color-sub2);
+}
+
+hr {
+    margin-top: var(--hr-margin);
+    border-top: none;
+    border-bottom: 1px dashed var(--secondary-color);
+    margin-bottom: var(--hr-margin);
+}
+
+
+h1 {
+    font-size: var(--h1-size);
+    word-spacing: var(--header-spacing);
+    margin-top: var(--header-margin-top);
+    padding-top: var(--header-margin-top);
+    margin-bottom: var(--header-margin-bottom);
+    font-family: var(--font-stack-bold), monospace;
+    scroll-margin-top: var(--scroll-margin);
+    font-weight: normal;
+}
+
+h2 {
+    font-size: var(--h2-size);
+    border-bottom: 1px dashed var(--hrcolor);
+    word-spacing: var(--header-spacing);
+    margin-top: var(--subheader-margin-top);
+    padding-bottom: var(--subheader-padding-bottom);
+    font-family: var(--font-stack-bold), monospace;
+    scroll-margin-top: var(--scroll-margin);
+    font-weight: normal;
+}
+
+h3 {
+    margin-top: var(--subheader-margin-top);
+    font-size: var(--h3-size);
+    border-bottom: 1px dashed var(--hrcolor);
+    padding-bottom: var(--subheader-padding-bottom);
+    font-family: var(--font-stack-bold), monospace;
+    scroll-margin-top: var(--scroll-margin);
+    font-weight: normal;
+}
+
+h4 {
+    margin-top: var(--subheader-margin-top);
+    font-size: var(--h4-size);
+    border-bottom: 1px dashed var(--hrcolor);
+    padding-bottom: var(--subheader-padding-bottom);
+    font-family: var(--font-stack-bold), monospace;
+    scroll-margin-top: var(--scroll-margin);
+    font-weight: normal;
+}
+
+p {
+    margin-bottom: var(--paragraph-margin);
+}
+
+i {
+    font-family: var(--font-stack-italic), monospace;
+}
+
+em {
+    font-family: var(--font-stack-bolditalic), monospace;
+}
+
+strong {
+    font-family: var(--font-stack-bold), monospace;
+    font-weight: normal;
+}
+
+ul  {
+    padding-left: 20px;
+}
+
+ul > li {
+    font-family: var(--font-stack-paragraph), monospace;
+    font-weight: normal;
+    list-style-type:  none;
+    line-height: 1.8em;
+}
+
+ul > li code {
+    font-family: var(--font-stack), monospace;
+    border: 1px solid var(--secondary-color-lowalpha);
+    color: var(--secondary-color);
+    border-radius: 0;
+    padding: 0 5px 1px 5px;
+    background-color: var(--secondary-color-very-lowalpha);
+    vertical-align: top;
+}
+
+ul > li:before {
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), monospace;
+    margin-right: 10px;
+    content: ">"
+}
+
+ul > li > ul > li:before {
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), monospace;
+    margin-right: 10px;
+    content: "-"
+}
+ul > li > ul > li> ul > li:before {
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), monospace;
+    margin-right: 10px;
+    content: "*"
+}
+
+table > tbody > tr > td > a {
+    text-decoration: underline;
+}
+
+table > tbody > tr > td > code {
+    color: var(--secondary-color);
+    font-weight: normal;
+}
+
+
+.kv-table > table, table.kv-table {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.kv-table > table > thead > tr > th , table.kv-table > thead > tr > th {
+    font-family: var(--font-stack), sans-serif;
+    background: var(--kv-table-header-background);
+    text-align: left;
+    padding: 10px;
+    color: var(--font-color);
+    font-weight: normal;
+    border-bottom: 1px dashed var(--kv-table-dividers);
+    border-top: 1px dashed var(--kv-table-header-border-top);
+}
+
+.kv-table > table > thead > tr > th:first-child, table.kv-table > thead > tr > th:first-child {
+    font-family: var(--font-stack-bold), sans-serif;
+    background: var(--kv-table-header-background-reversed);
+    text-align: right;
+    color: var(--primary-color);
+    padding-right: 10px;
+}
+
+.kv-table > table > thead > tr > th:nth-child(2), table.kv-table > thead > tr > th:nth-child(2) {
+    font-family: var(--font-stack-bold), sans-serif;
+}
+
+.kv-table > table > tbody > tr > td, table.kv-table > tbody > tr > td {
+    font-family: var(--font-stack), sans-serif;
+    padding: 10px 0 10px 10px;
+    border-bottom: 1px dashed var(--kv-table-dividers);
+}
+
+.kv-table > table > tbody > tr > td:first-child > code, table.kv-table > tbody > tr > td:first-child > code {
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), sans-serif;
+}
+
+.kv-table > table > tbody > tr > td:nth-child(2), table.kv-table > tbody > tr > td:nth-child(2) {
+    color: var(--font-color-sub1)
+}
+
+.kv-table > table  > tbody > tr > td:nth-child(2) > code, table.kv-table > tbody > tr > td:nth-child(2) > code {
+    font-family: var(--font-stack), sans-serif;
+    border: 1px solid var(--secondary-color-lowalpha);
+    color: var(--secondary-color);
+    border-radius: 0;
+    padding: 0 5px 1px 5px;
+    background-color: var(--secondary-color-very-lowalpha);
+
+}
+
+.kv-table > table > tbody > tr > td:first-child, table.kv-table > tbody > tr > td:first-child {
+    width: 180px;
+    text-align: right;
+    padding-right: 10px;
+    border-right: 1px dashed var(--kv-table-dividers);
+}
+
+.kv-table > table > tbody > tr > td > a, table.kv-table > tbody > tr > td > a {
+    text-decoration: underline;
+}
+
+.kv-table > table > tbody > tr > td > code, table.kv-table > tbody > tr > td > code {
+    color: var(--secondary-color);
+    font-weight: normal;
+}
+
+.prop-type-table > table > thead > tr > th, table.prop-type-table > thead > tr > th {
+    font-family: var(--font-stack-bold), sans-serif;
+    background-color: var(--table-header-background-solid);
+    text-align: left;
+    padding: 10px;
+    color: var(--font-color);
+    border-bottom: 1px dashed var(--kv-table-dividers);
+    border-top: 1px dashed var(--kv-table-header-border-top);
+    font-weight: normal;
+}
+
+.prop-type-table > table > thead > tr > th:first-child, table.prop-type-table > thead > tr > th:first-child {
+    background: var(--kv-table-header-background-reversed);
+    text-align: right;
+    color: var(--primary-color);
+    padding-right: 10px;
+    font-weight: normal;
+}
+
+.prop-type-table > table > thead > tr > th:nth-child(2), table.prop-type-table > thead > tr > th:nth-child(2) {
+    text-align: center;
+    color: var(--font-color);
+    background-color: var(--kv-table-header-background-solid);
+    font-weight: normal;
+}
+
+.prop-type-table > table > thead > tr > th:last-child, table.prop-type-table > thead > tr > th:last-child {
+    background: var(--kv-table-header-background);
+}
+
+.prop-type-table > table > tbody > tr > td, table.prop-type-table > tbody > tr > td {
+    font-family: var(--font-stack-paragraph), monospace;
+    color: var(--font-color-sub1);
+    padding: 10px 0 10px 10px;
+    border-bottom: 1px dashed var(--secondary-color-dimmer);
+}
+
+.prop-type-table > table > tbody > tr > td:first-child > code, table.prop-type-table > tbody > tr > td:first-child > code {
+    color: var(--primary-color);
+    font-family: var(--font-stack-bold), monospace;
+}
+
+.prop-type-table > table > tbody > tr > td:nth-child(3) > code, table.prop-type-table > tbody > tr > td:nth-child(3) > code {
+    font-family: var(--font-stack), sans-serif;
+    border: 1px solid var(--secondary-color-lowalpha);
+    color: var(--secondary-color);
+    border-radius: 0;
+    padding: 0 5px 1px 5px;
+    background-color: var(--secondary-color-very-lowalpha);
+}
+
+.prop-type-table > table > tbody > tr > td:first-child, table.prop-type-table > tbody > tr > td:first-child {
+    width: 120px;
+    text-align: right;
+    padding-right: 10px;
+    border-right: 1px dashed var(--secondary-color-dimmer);
+}
+
+.prop-type-table > table > tbody > tr > td:nth-child(2), table.prop-type-table > tbody > tr > td:nth-child(2) {
+    width: 10px;
+    color: var(--font-color);
+    font-family: var(--font-stack-italic), monospace;
+    text-align: center;
+    padding-right: 10px;
+    border-right: 1px dashed var(--secondary-color-dimmer);
+}
+
+.prop-type-table > table, table.prop-type-table  {
+    width: 100%;
+    border-spacing: 0;
+}
+
+.prop-type-table > table  > tbody > tr > td > a, table.prop-type-table  > tbody > tr > td > a {
+    text-decoration: underline;
+}
+
+.prop-type-table > table > tbody > tr > td > code, table.prop-type-table  > tbody > tr > td > code {
+    color: var(--secondary-color);
+    font-size: 1em;
+}
+
+.spin {
+    display: inline-block;
+    position: relative;
+    width: 35px;
+    height: 25px;
+}
+.spin:after {
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    width: 0;
+    height: 0;
+    margin: 8px;
+    box-sizing: border-box;
+    border: 10px solid var(--primary-color);
+    border-color: var(--primary-color) transparent var(--primary-color) transparent;
+    animation: spinner 1.2s infinite;
+}
+.pb33f-loader {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 60px;
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0);
+        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+        transform: rotate(900deg);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+        transform: rotate(1800deg);
+    }
+}

package/dist/css/pb33f-theme.css

@@ -0,0 +1,195 @@
+@font-face {
+    font-family: 'BerkeleyMono-Regular';
+    src: url('../fonts/BerkeleyMono-Regular.woff2') format('woff2');
+    src: url('../fonts/BerkeleyMono-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'BerkeleyMono-Italic';
+    src: url('../fonts/BerkeleyMono-Italic.woff2') format('woff2');
+    src: url('../fonts/BerkeleyMono-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'BerkeleyMono-Bold';
+    src: url('../fonts/BerkeleyMono-Bold.woff2') format('woff2');
+    src: url('../fonts/BerkeleyMono-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-family: 'BerkeleyMono-BoldItalic';
+    src: url('../fonts/BerkeleyMono-BoldItalic.woff2') format('woff2');
+    src: url('../fonts/BerkeleyMono-BoldItalic.woff') format('woff');
+}
+
+html {
+    --small-view: 1000px;
+    --mobile-view: 600px;
+
+    --global-line-height: 1.7em;
+    --global-space: 10px;
+    --global-padding: 10px;
+    --footer-padding: 5px;
+    --global-font-spacing: -3px;
+
+    --font-stack-bold: BerkeleyMono-Bold, Roboto Mono, Monaco, Menlo, Helvetica Neue,Helvetica,Verdana,Tahoma, Arial, sans-serif;
+    --font-stack-italic: BerkeleyMono-Italic, Roboto Mono, Monaco, Menlo, Helvetica Neue,Helvetica,Verdana,Tahoma, Arial, sans-serif;
+    --font-stack-bolditalic: BerkeleyMono-BoldItalic, Roboto Mono, Monaco, Menlo,Helvetica Neue,Helvetica,Verdana,Tahoma, Arial, sans-serif;
+    --font-stack-paragraph: BerkeleyMono-Regular, Roboto Mono, Monaco, Menlo, Helvetica Neue,Helvetica,Verdana,Tahoma, Arial, sans-serif;
+    --font-stack: BerkeleyMono-Regular, Roboto Mono, Monaco, Menlo, Lucida Console, Liberation Mono,
+    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
+    serif;
+    --font-emoji: Arial, Verdana, serif;
+    --font-size: 16px;
+
+    --paragraph-margin: 40px;
+
+    --scroll-margin: 60px;
+
+    --footer-font-size: 12px;
+    --footer-height: 25px;
+
+
+
+    --hr-margin: 40px;
+
+    --header-spacing: -10px;
+    --header-margin-top: 0;
+    --header-margin-bottom: 20px;
+    --subheader-margin-top: 50px;
+    --subheader-margin-bottom: 0;
+    --subheader-padding-bottom: 10px;
+
+    --h1-size: 40px;
+    --h2-size: 33px;
+    --h3-size: 25px;
+    --h4-size: 18px;
+
+
+    --background-color: #0d1117;
+    --font-color: #e8e9ed;
+    --font-color-sub1: #a7a7a7;
+    --font-color-sub2: #787878;
+    --font-color-sub3: #585858;
+    --secondary-color: #f83aff;
+    --secondary-color-dimmer: rgba(248, 58, 255, 0.45);
+    --secondary-color-text-shadow: rgba(250, 113, 251, 0.5);
+    --secondary-color-text-shadow-outer: rgba(251, 169, 255, 0.06);
+    --secondary-color-lowalpha: rgba(248, 58, 255, 0.30);
+    --secondary-color-very-lowalpha: rgba(248, 58, 255, 0.05);
+    --secondary-color-shadow: rgb(59, 41, 87);
+    --secondary-color-shadow-mid: rgb(78, 54, 114);
+    --tertiary-color: #a3abba;
+
+
+
+
+    --terminal-text: #00FF00FF;
+    --terminal-text-shadow: #00FF00;
+
+    --terminal-yellow: #fddb00;
+    --hrcolor: #3d3d3d;
+    --code-border: #525252;
+    --string-literal: #fd66e5;
+    --neon-pink: #E400FB;
+    --warn-400: #ff6a00;
+    --warn-400-lowalpha: rgba(255, 106, 0, 0.3);
+    --warn-300: #ff9900;
+    --warn-300-lowalpha: rgba(255, 153, 0, 0.3);
+    --warn-200: #ffb700;
+    --warn-200-lowalpha: rgba(255, 183, 0, 0.3);
+    --warn-color: #ffd500;
+    --warn-color-lowalpha: rgba(255, 213, 0, 0.3);
+    --ok-400: #f7ff00;
+    --ok-400-lowalpha: rgba(230, 255, 0, 0.3);
+    --ok-300: #d0ff00;
+    --ok-300-lowalpha: rgba(208, 255, 0, 0.3);
+    --ok-200: #aaff00;
+    --ok-200-lowalpha: rgba(170, 255, 0, 0.3);
+    --ok-color: #1aff00;
+    --ok-color-lowalpha: rgba(170, 255, 0, 0.3);
+
+
+    --sl-color-primary-50: rgba(234, 246, 255, 0.13);
+    --sl-color-primary-100: rgba(211, 240, 251, 0.22);
+    --sl-color-primary-200: rgba(189, 224, 250, 0.4);
+    --sl-color-primary-300: rgba(156, 210, 250, 0.65);
+    --sl-color-primary-400: rgba(131, 203, 250, 0.68);
+    --sl-color-primary-500: rgba(123, 209, 253, 0.86);
+    --sl-color-primary-600: rgba(98, 196, 255, 1.0);
+    --sl-color-primary-700: rgb(81, 189, 251);
+    --sl-color-primary-800: rgb(53, 184, 253);
+    --sl-color-primary-900: rgb(19, 164, 251);
+
+    --terminal-background: black;
+
+
+
+    --table-header-background-solid: rgba(248, 58, 255, 0.30);
+
+    --kv-table-header-border-top: none;
+    --kv-table-dividers: var(--secondary-color-dimmer);
+    --kv-table-header-background-reversed:  linear-gradient(-90deg, rgba(248, 58, 255, 0.30) 0%, rgba(13, 17, 23, 0.80) 60%);
+    --kv-table-header-background:  linear-gradient(90deg, rgba(248, 58, 255, 0.30) 0%, rgba(13, 17, 23, 0.80) 60%);
+    --kv-table-header-background-solid: var(--table-header-background-solid);
+
+    --card-background-color: rgba(35, 35, 35, 0.55);
+
+
+    --primary-color: rgba(98, 196, 255, 1.0);
+    --primary-color-text-shadow: rgba(98, 196, 255, 0.5);
+
+
+    --primary-color-lowalpha: rgba(98, 196, 255, 0.6);
+    --primary-color-verylowalpha: rgba(98, 196, 255, 0.2);
+    --error-color: #ff3c74;
+    --error-font-color: #ff246b;
+    --error-color-lowalpha: rgba(255, 60, 116, 0.4);
+    --error-color-loweralpha: rgba(255, 60, 116, 0.2);
+    --error-color-verylowalpha: #0c0000;
+    --progress-bar-background: #0a0a0a;
+    --progress-bar-fill: #62c4ff;
+    --code-bg-color: none;
+    --input-style: solid;
+    --display-h1-decoration: none;
+
+
+    --bars-and-borders: var(--secondary-color);
+    --bars-and-borders-dim: var(--secondary-color-dimmer);
+
+    --primary-text-shadow: var(--primary-color);
+    --secondary-text-shadow: var(--secondary-color);
+}
+
+html[theme="light"] {
+    --background-color: #fff;
+    --font-color: black;
+
+    --font-color-sub1: #282828;
+    --font-color-sub2: #434343;
+    --font-color-sub3: #747474;
+    --secondary-color: #c201c8;
+    --secondary-color-dimmer: rgba(163, 0, 167, 0.45);
+    --secondary-color-text-shadow: rgba(250, 113, 251, 0.5);
+    --tertiary-color: #4c4c4c;
+
+    --primary-color: rgb(47, 142, 251);
+    --primary-color-text-shadow: none;
+
+    --terminal-background: #f4f4f4;
+    --terminal-text: black;
+    --terminal-text-shadow: none;
+
+    --kv-table-header-border-top: var(--code-border);
+    --kv-table-dividers: var(--code-border);
+    --kv-table-header-background-reversed: linear-gradient(-90deg, var(--terminal-background) 0%, var(--background-color) 60%);
+    --kv-table-header-background: linear-gradient(-90deg, var(--background-color) 0%, var(--terminal-background) 60%);
+    --kv-table-header-background-solid: var(--terminal-background);
+
+
+    --bars-and-borders: var(--code-border);
+    --bars-and-borders-dim: var(--font-color-sub3);
+    --primary-text-shadow: none;
+    --secondary-text-shadow: none;
+
+}

package/dist/css/syntax.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/css/syntax.css.js

@@ -0,0 +1,129 @@
+import { css } from "lit";
+export default css `
+    /**
+     * okaidia theme for JavaScript, CSS and HTML
+     * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+     * @author ocodia
+     */
+
+    code[class*="language-"],
+    pre[class*="language-"] {
+        color: #f8f8f2;
+        background: none;
+        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+        font-size: 1em;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+    }
+
+    /* Code blocks */
+
+    pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+        border-radius: 0.3em;
+    }
+
+    :not(pre) > code[class*="language-"],
+    pre[class*="language-"] {
+        background: #272822;
+    }
+
+    /* Inline code */
+
+    :not(pre) > code[class*="language-"] {
+        padding: .1em;
+        border-radius: .3em;
+        white-space: normal;
+    }
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+        color: #8292a2;
+    }
+
+    .token.punctuation {
+        color: #f8f8f2;
+    }
+
+    .token.namespace {
+        opacity: .7;
+    }
+
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted {
+        color: #f92672;
+    }
+
+    .token.boolean,
+    .token.number {
+        color: #ae81ff;
+    }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+        color: #a6e22e;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string,
+    .token.variable {
+        color: #f8f8f2;
+    }
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name {
+        color: #e6db74;
+    }
+
+    .token.keyword {
+        color: #66d9ef;
+    }
+
+    .token.regex,
+    .token.important {
+        color: #fd971f;
+    }
+
+    .token.important,
+    .token.bold {
+        font-weight: bold;
+    }
+
+    .token.italic {
+        font-style: italic;
+    }
+
+    .token.entity {
+        cursor: help;
+    }
+`;