diff options
Diffstat (limited to 'htmx/static/pico-1.5.11/docs/css/pico.docs.css')
| -rw-r--r-- | htmx/static/pico-1.5.11/docs/css/pico.docs.css | 508 |
1 files changed, 508 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/css/pico.docs.css b/htmx/static/pico-1.5.11/docs/css/pico.docs.css new file mode 100644 index 0000000..598575a --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/css/pico.docs.css @@ -0,0 +1,508 @@ +/*! + * Pico: Customs styles for Docs + */ +/** + * Theme: Additions for docs + */ +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} + +[data-theme=light], +:root:not([data-theme=dark]) { + --invalid-color: #c62828; + --valid-color: #388e3c; + --nav-background-color: rgba(255, 255, 255, 0.7); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #fff; + --article-code-background-color: #f9fafb; +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme=light]) { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0e1419; + --article-code-background-color: var(--code-background-color); + } +} +[data-theme=dark] { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0e1419; + --article-code-background-color: var(--code-background-color); +} + +/** + * Docs: Document + */ +html { + scroll-behavior: smooth; +} + +/** + * Docs: Main (Grid) + */ +body > main { + padding-top: calc(var(--block-spacing-vertical) + 3.5rem); +} +@media (min-width: 992px) { + body > main { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + grid-column-gap: calc(var(--block-spacing-horizontal) * 3); + display: grid; + grid-template-columns: 200px auto; + } +} +@media (min-width: 1200px) { + body > main { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} +body > main > aside, +body > main div[role=document] { + min-width: 0; +} + +div[role=document] section a[href*="//"]:not([href*="https://picocss.com"], [role])::after { + display: inline-block; + width: 1rem; + height: 1rem; + background-image: var(--icon-external); + background-position: top center; + background-size: 0.66rem auto; + background-repeat: no-repeat; + content: ""; +} + +svg { + height: 1rem; +} + +/** + * Docs: Aside + */ +main > aside nav { + width: 100%; + padding-bottom: var(--block-spacing-vertical); +} +@media (min-width: 992px) { + main > aside nav { + position: fixed; + width: 200px; + max-height: calc(100vh - 5.5rem); + overflow-x: hidden; + overflow-y: auto; + } +} +main > aside nav a#toggle-docs-navigation { + display: block; + margin: 0; + margin-bottom: var(--spacing); + padding: 0; + padding-bottom: var(--spacing); + border-bottom: var(--border-width) solid var(--accordion-border-color); +} +main > aside nav a#toggle-docs-navigation svg { + margin-right: calc(var(--spacing) * 0.5); + vertical-align: -3px; +} +@media (min-width: 992px) { + main > aside nav a#toggle-docs-navigation { + display: none; + } +} +main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse { + display: none; +} +main > aside nav.closed-on-mobile details { + display: none; +} +@media (min-width: 992px) { + main > aside nav.closed-on-mobile details { + display: block; + } + main > aside nav.closed-on-mobile > a#toggle-docs-navigation { + display: none; + } +} +main > aside nav.open a#toggle-docs-navigation svg.expand { + display: none; +} +main > aside details { + padding-bottom: 0; +} +main > aside details summary { + padding-bottom: 0.5rem; +} +main > aside li, +main > aside summary { + padding-top: 0; + padding-bottom: 0; + font-size: 16px; +} +main > aside ul { + padding-left: 0.25rem; +} +main > aside li a { + --nav-link-spacing-vertical: 0.25rem; + --nav-link-spacing-horizontal: 0.75rem; +} +main > aside li a svg { + vertical-align: middle; +} +main > aside a.secondary:focus { + background-color: transparent; + color: var(--primary-hover); +} +main > aside a[aria-current], +main > aside a[aria-current]:hover { + color: var(--primary); +} +main > aside details { + border-bottom: none; +} +main > aside details summary { + color: var(--h1-color); + font-weight: 300; + font-size: 14px; + text-transform: uppercase; +} +main > aside details summary::after { + display: none; +} +main > aside details[open] > summary { + margin-bottom: 0; +} +main > aside details[open] > summary:not([role=button], :focus) { + color: var(--h1-color); +} + +/** + * Docs: Documentation + */ +#themes button.theme-switcher:first-of-type { + --font-weight: bold; +} +#themes button.theme-switcher i { + font-style: normal; +} + +#customization figure { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(9, 1fr); + margin-bottom: 0; + overflow: hidden; +} +@media (min-width: 576px) { + #customization figure { + grid-template-rows: 1fr; + grid-template-columns: repeat(18, 1fr); + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); + } +} +#customization figure ~ article { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +#customization figure button { + margin-bottom: 0; + padding: 0; + padding-top: 100%; + border: none; + border-radius: 0; +} +#customization figure button:focus { + box-shadow: none; +} +#customization figure button.picked { + background-image: var(--icon-check); + background-position: center; + background-size: 0.66rem auto; + background-repeat: no-repeat; + box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25); +} +#customization figure button[data-color=lime].picked, #customization figure button[data-color=yellow].picked, #customization figure button[data-color=amber].picked { + background-image: var(--icon-check-dark); +} +#customization h4 { + transition: color var(--transition); +} +#customization pre[data-theme=generated] { + border-color: var(--primary); +} + +#grid { + --grid-spacing-vertical: 1rem; +} +#grid button { + display: block; + width: 100%; + margin-bottom: var(--spacing); +} +@media (min-width: 576px) { + #grid button { + display: inline-block; + width: auto; + margin-right: 0.5rem; + } +} +#grid button svg { + stroke: var(--secondary); + margin-right: 0.5rem; + border: 2px solid currentColor; + border-radius: 1rem; + background: currentColor; +} +#grid .grid > * { + padding: calc(var(--spacing) / 2) 0; + border-radius: var(--border-radius); + background: var(--code-background-color); + font-size: 87.5%; + text-align: center; +} +#grid details { + margin-top: calc(var(--typography-spacing-vertical) * 2); +} +#grid details svg { + vertical-align: bottom; +} + +#buttons a[role=button] { + margin-right: calc(var(--spacing) * 0.5); +} + +#forms div.grid { + grid-row-gap: 0; +} + +#modal button { + --font-weight: bold; +} + +/** + * Docs: Typography + */ +h1 { + margin-top: -0.25em; +} + +section > hgroup { + margin-bottom: calc(var(--typography-spacing-vertical) * 2); +} + +[role=document] section > h1, +[role=document] section > h2, +[role=document] section > h3 { + line-height: 1; +} + +/** + * Docs: Code + */ +article > footer.code { + background: var(--article-code-background-color); +} + +article pre, +article pre code { + margin-bottom: 0; + background: transparent; +} + +section > pre { + margin: var(--block-spacing-vertical) 0; + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background: var(--article-code-background-color); + box-shadow: var(--card-box-shadow); +} + +[data-theme=invalid], +[data-theme=valid] { + position: relative; + margin-bottom: 0 !important; +} +[data-theme=invalid]:before, +[data-theme=valid]:before { + display: block; + position: absolute; + top: 0; + right: 0; + padding: 0.375rem 0.75rem; + border-radius: 0; + color: var(--primary-inverse); + font-size: 14px; + line-height: 1; +} +@media (min-width: 992px) { + [data-theme=invalid]:before, + [data-theme=valid]:before { + top: var(--spacing); + right: var(--spacing); + } +} +[data-theme=invalid] code, +[data-theme=valid] code { + padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem) var(--block-spacing-horizontal); +} + +[data-theme=invalid]:before { + background: var(--invalid-color); + content: "Not so great"; +} + +[data-theme=valid]:before { + background: var(--valid-color); + content: "Great"; +} + +/** + * Docs: Modal + */ +dialog.example { + display: block; + z-index: inherit; + position: relative; + top: inherit; + right: inherit; + bottom: inherit; + left: inherit; + align-items: inherit; + justify-content: inherit; + width: inherit; + min-width: inherit; + height: inherit; + min-height: inherit; + padding: 0; + background-color: inherit; +} +dialog.example article { + max-width: inherit; +} +dialog.example:not([open]), dialog.example[open=false] { + display: none; +} + +.dialog-is-open body > button { + filter: blur(0.125rem); +} + +/** + * Docs: Navs + */ +body > nav { + --nav-link-spacing-vertical: 1rem; + -webkit-backdrop-filter: saturate(180%) blur(20px); + z-index: 99; + position: fixed; + top: 0; + right: 0; + left: 0; + backdrop-filter: saturate(180%) blur(20px); + background-color: var(--nav-background-color); + box-shadow: 0px 1px 0 var(--nav-border-color); +} +body > nav.container-fluid { + padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px)); +} +body > nav a { + border-radius: 0; +} +body > nav svg { + vertical-align: text-bottom; +} +body > nav ul:first-of-type { + margin-left: calc(var(--spacing) * -1); +} +body > nav ul:first-of-type li { + padding: 0; +} +body > nav ul:first-of-type li:first-of-type a { + display: block; + margin: 0; + padding: 0; + background: var(--h1-color); + color: var(--nav-logo-color); +} +body > nav ul:first-of-type li:first-of-type a svg { + display: block; + width: 3.5rem; + height: 3.5rem; +} +body > nav ul:first-of-type li:nth-of-type(2) { + display: none; + margin-left: calc(var(--spacing) * 1.5); + color: var(--h1-color); +} +@media (min-width: 992px) { + body > nav ul:first-of-type li:nth-of-type(2) { + display: inline; + } +} + +/** + * Docs: Theme switcher + */ +.switcher { + position: fixed; + right: calc(var(--spacing) / 2 + var(--scrollbar-width, 0px)); + bottom: var(--spacing); + width: auto; + margin-bottom: 0; + padding: 0.75rem; + border-radius: 2rem; + box-shadow: var(--card-box-shadow); + line-height: 1; + text-align: right; +} +.switcher::after { + display: inline-block; + width: 1rem; + height: 1rem; + border: 0.15rem solid currentColor; + border-radius: 50%; + background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); + content: ""; + vertical-align: bottom; + transition: transform var(--transition); +} +.switcher i { + display: inline-block; + max-width: 0; + padding: 0; + overflow: hidden; + font-style: normal; + font-size: 0.875rem; + white-space: nowrap; +} +.switcher:hover, .switcher:focus { + max-width: 100%; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); +} +.switcher:hover::after { + transform: rotate(180deg); +} +.switcher:hover i { + max-width: 100%; + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); + transition: max-width var(--transition), padding var(--transition); +} +.switcher:focus { + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); +} +@media (min-width: 576px) { + .switcher { + right: calc(var(--spacing) + var(--scrollbar-width, 0px)); + } +} + +/*# sourceMappingURL=pico.docs.css.map */
\ No newline at end of file |