)
- */
-article {
- margin-bottom: var(--pico-block-spacing-vertical);
- padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
- border-radius: var(--pico-border-radius);
- background: var(--pico-card-background-color);
- box-shadow: var(--pico-card-box-shadow);
-}
-article > header,
-article > footer {
- margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
- margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
- padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
- background-color: var(--pico-card-sectioning-background-color);
-}
-article > header {
- margin-top: calc(var(--pico-block-spacing-vertical) * -1);
- margin-bottom: var(--pico-block-spacing-vertical);
- border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
- border-top-right-radius: var(--pico-border-radius);
- border-top-left-radius: var(--pico-border-radius);
-}
-article > footer {
- margin-top: var(--pico-block-spacing-vertical);
- margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
- border-top: var(--pico-border-width) solid var(--pico-card-border-color);
- border-bottom-right-radius: var(--pico-border-radius);
- border-bottom-left-radius: var(--pico-border-radius);
-}
-
-/**
- * Dropdown (details.dropdown)
- */
-details.dropdown {
- position: relative;
- border-bottom: none;
-}
-details.dropdown > summary::after,
-details.dropdown > button::after,
-details.dropdown > a::after {
- display: block;
- width: 1rem;
- height: calc(1rem * var(--pico-line-height, 1.5));
- margin-inline-start: 0.25rem;
- float: right;
- transform: rotate(0deg) translateX(0.2rem);
- background-image: var(--pico-icon-chevron);
- background-position: right center;
- background-size: 1rem auto;
- background-repeat: no-repeat;
- content: "";
-}
-
-nav details.dropdown {
- margin-bottom: 0;
-}
-
-details.dropdown > summary:not([role]) {
- height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
- padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
- border: var(--pico-border-width) solid var(--pico-form-element-border-color);
- border-radius: var(--pico-border-radius);
- background-color: var(--pico-form-element-background-color);
- color: var(--pico-form-element-placeholder-color);
- line-height: inherit;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- user-select: none;
- transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
-}
-details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
- border-color: var(--pico-form-element-active-border-color);
- background-color: var(--pico-form-element-active-background-color);
-}
-details.dropdown > summary:not([role]):focus {
- box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
-}
-details.dropdown > summary:not([role]):focus-visible {
- outline: none;
-}
-details.dropdown > summary:not([role])[aria-invalid=false] {
- --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
- --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
- --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
-}
-details.dropdown > summary:not([role])[aria-invalid=true] {
- --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
- --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
- --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
-}
-
-nav details.dropdown {
- display: inline;
- margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
-}
-nav details.dropdown > summary::after {
- transform: rotate(0deg) translateX(0rem);
-}
-nav details.dropdown > summary:not([role]) {
- height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
- padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav details.dropdown > summary:not([role]):focus-visible {
- box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
-}
-
-details.dropdown > summary + ul {
- display: flex;
- z-index: 99;
- position: absolute;
- left: 0;
- flex-direction: column;
- width: 100%;
- min-width: -moz-fit-content;
- min-width: fit-content;
- margin: 0;
- margin-top: var(--pico-outline-width);
- padding: 0;
- border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
- border-radius: var(--pico-border-radius);
- background-color: var(--pico-dropdown-background-color);
- box-shadow: var(--pico-dropdown-box-shadow);
- color: var(--pico-dropdown-color);
- white-space: nowrap;
- opacity: 0;
- transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
-}
-details.dropdown > summary + ul[dir=rtl] {
- right: 0;
- left: auto;
-}
-details.dropdown > summary + ul li {
- width: 100%;
- margin-bottom: 0;
- padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
- list-style: none;
-}
-details.dropdown > summary + ul li:first-of-type {
- margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details.dropdown > summary + ul li:last-of-type {
- margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
-}
-details.dropdown > summary + ul li a {
- display: block;
- margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
- padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
- overflow: hidden;
- border-radius: 0;
- color: var(--pico-dropdown-color);
- text-decoration: none;
- text-overflow: ellipsis;
-}
-details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
- background-color: var(--pico-dropdown-hover-background-color);
-}
-details.dropdown > summary + ul li label {
- width: 100%;
-}
-details.dropdown > summary + ul li:has(label):hover {
- background-color: var(--pico-dropdown-hover-background-color);
-}
-
-details.dropdown[open] > summary {
- margin-bottom: 0;
-}
-
-details.dropdown[open] > summary + ul {
- transform: scaleY(1);
- opacity: 1;
- transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
-}
-
-details.dropdown[open] > summary::before {
- display: block;
- z-index: 1;
- position: fixed;
- width: 100vw;
- height: 100vh;
- inset: 0;
- background: none;
- content: "";
- cursor: default;
-}
-
-label > details.dropdown {
- margin-top: calc(var(--pico-spacing) * 0.25);
-}
-
-/**
- * Group ([role="group"], [role="search"])
- */
-[role=search],
-[role=group] {
- display: inline-flex;
- position: relative;
- width: 100%;
- margin-bottom: var(--pico-spacing);
- border-radius: var(--pico-border-radius);
- box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
- vertical-align: middle;
- transition: box-shadow var(--pico-transition);
-}
-[role=search] > *,
-[role=search] input:not([type=checkbox], [type=radio]),
-[role=search] select,
-[role=group] > *,
-[role=group] input:not([type=checkbox], [type=radio]),
-[role=group] select {
- position: relative;
- flex: 1 1 auto;
- margin-bottom: 0;
-}
-[role=search] > *:not(:first-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=search] select:not(:first-child),
-[role=group] > *:not(:first-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
- margin-left: 0;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-}
-[role=search] > *:not(:last-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
-[role=search] select:not(:last-child),
-[role=group] > *:not(:last-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
-[role=group] select:not(:last-child) {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-[role=search] > *:focus,
-[role=search] input:not([type=checkbox], [type=radio]):focus,
-[role=search] select:focus,
-[role=group] > *:focus,
-[role=group] input:not([type=checkbox], [type=radio]):focus,
-[role=group] select:focus {
- z-index: 2;
-}
-[role=search] button:not(:first-child),
-[role=search] [type=submit]:not(:first-child),
-[role=search] [type=reset]:not(:first-child),
-[role=search] [type=button]:not(:first-child),
-[role=search] [role=button]:not(:first-child),
-[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=search] select:not(:first-child),
-[role=group] button:not(:first-child),
-[role=group] [type=submit]:not(:first-child),
-[role=group] [type=reset]:not(:first-child),
-[role=group] [type=button]:not(:first-child),
-[role=group] [role=button]:not(:first-child),
-[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
- margin-left: calc(var(--pico-border-width) * -1);
-}
-[role=search] button,
-[role=search] [type=submit],
-[role=search] [type=reset],
-[role=search] [type=button],
-[role=search] [role=button],
-[role=group] button,
-[role=group] [type=submit],
-[role=group] [type=reset],
-[role=group] [type=button],
-[role=group] [role=button] {
- width: auto;
-}
-@supports selector(:has(*)) {
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
- --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
- }
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
- [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
- [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
- border-color: transparent;
- }
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
- --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
- }
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
- [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
- [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
- --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
- --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
- }
- [role=search] button:focus,
- [role=search] [type=submit]:focus,
- [role=search] [type=reset]:focus,
- [role=search] [type=button]:focus,
- [role=search] [role=button]:focus,
- [role=group] button:focus,
- [role=group] [type=submit]:focus,
- [role=group] [type=reset]:focus,
- [role=group] [type=button]:focus,
- [role=group] [role=button]:focus {
- box-shadow: none;
- }
-}
-
-[role=search] > *:first-child {
- border-top-left-radius: 5rem;
- border-bottom-left-radius: 5rem;
-}
-[role=search] > *:last-child {
- border-top-right-radius: 5rem;
- border-bottom-right-radius: 5rem;
-}
-
-/**
- * Loading ([aria-busy=true])
- */
-[aria-busy=true]:not(input, select, textarea, html, form) {
- white-space: nowrap;
-}
-[aria-busy=true]:not(input, select, textarea, html, form)::before {
- display: inline-block;
- width: 1em;
- height: 1em;
- background-image: var(--pico-icon-loading);
- background-size: 1em auto;
- background-repeat: no-repeat;
- content: "";
- vertical-align: -0.125em;
-}
-[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
- margin-inline-end: calc(var(--pico-spacing) * 0.5);
-}
-[aria-busy=true]:not(input, select, textarea, html, form):empty {
- text-align: center;
-}
-
-button[aria-busy=true],
-[type=submit][aria-busy=true],
-[type=button][aria-busy=true],
-[type=reset][aria-busy=true],
-[role=button][aria-busy=true],
-a[aria-busy=true] {
- pointer-events: none;
-}
-
-/**
- * Modal ()
- */
-:root,
-:host {
- --pico-scrollbar-width: 0px;
-}
-
-dialog {
- display: flex;
- z-index: 999;
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- align-items: center;
- justify-content: center;
- width: inherit;
- min-width: 100%;
- height: inherit;
- min-height: 100%;
- padding: 0;
- border: 0;
- -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
- backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
- background-color: var(--pico-modal-overlay-background-color);
- color: var(--pico-color);
-}
-dialog > article {
- width: 100%;
- max-height: calc(100vh - var(--pico-spacing) * 2);
- margin: var(--pico-spacing);
- overflow: auto;
-}
-@media (min-width: 576px) {
- dialog > article {
- max-width: 510px;
- }
-}
-@media (min-width: 768px) {
- dialog > article {
- max-width: 700px;
- }
-}
-dialog > article > header > * {
- margin-bottom: 0;
-}
-dialog > article > header .close, dialog > article > header :is(a, button)[rel=prev] {
- margin: 0;
- margin-left: var(--pico-spacing);
- padding: 0;
- float: right;
-}
-dialog > article > footer {
- text-align: right;
-}
-dialog > article > footer button,
-dialog > article > footer [role=button] {
- margin-bottom: 0;
-}
-dialog > article > footer button:not(:first-of-type),
-dialog > article > footer [role=button]:not(:first-of-type) {
- margin-left: calc(var(--pico-spacing) * 0.5);
-}
-dialog > article .close, dialog > article :is(a, button)[rel=prev] {
- display: block;
- width: 1rem;
- height: 1rem;
- margin-top: calc(var(--pico-spacing) * -1);
- margin-bottom: var(--pico-spacing);
- margin-left: auto;
- border: none;
- background-image: var(--pico-icon-close);
- background-position: center;
- background-size: auto 1rem;
- background-repeat: no-repeat;
- background-color: transparent;
- opacity: 0.5;
- transition: opacity var(--pico-transition);
-}
-dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
- opacity: 1;
-}
-dialog:not([open]), dialog[open=false] {
- display: none;
-}
-
-.modal-is-open {
- padding-right: var(--pico-scrollbar-width, 0px);
- overflow: hidden;
- pointer-events: none;
- touch-action: none;
-}
-.modal-is-open dialog {
- pointer-events: auto;
- touch-action: auto;
-}
-
-:where(.modal-is-opening, .modal-is-closing) dialog,
-:where(.modal-is-opening, .modal-is-closing) dialog > article {
- animation-duration: 0.2s;
- animation-timing-function: ease-in-out;
- animation-fill-mode: both;
-}
-:where(.modal-is-opening, .modal-is-closing) dialog {
- animation-duration: 0.8s;
- animation-name: modal-overlay;
-}
-:where(.modal-is-opening, .modal-is-closing) dialog > article {
- animation-delay: 0.2s;
- animation-name: modal;
-}
-
-.modal-is-closing dialog,
-.modal-is-closing dialog > article {
- animation-delay: 0s;
- animation-direction: reverse;
-}
-
-@keyframes modal-overlay {
- from {
- -webkit-backdrop-filter: none;
- backdrop-filter: none;
- background-color: transparent;
- }
-}
-@keyframes modal {
- from {
- transform: translateY(-100%);
- opacity: 0;
- }
-}
-/**
- * Nav
- */
-:where(nav li)::before {
- float: left;
- content: "";
-}
-
-nav,
-nav ul {
- display: flex;
-}
-
-nav {
- justify-content: space-between;
- overflow: visible;
-}
-nav ol,
-nav ul {
- align-items: center;
- margin-bottom: 0;
- padding: 0;
- list-style: none;
-}
-nav ol:first-of-type,
-nav ul:first-of-type {
- margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
-}
-nav ol:last-of-type,
-nav ul:last-of-type {
- margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
-}
-nav li {
- display: inline-block;
- margin: 0;
- padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
-}
-nav li :where(a, [role=link]) {
- display: inline-block;
- margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
- padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
- border-radius: var(--pico-border-radius);
-}
-nav li :where(a, [role=link]):not(:hover) {
- text-decoration: none;
-}
-nav li button,
-nav li [role=button],
-nav li [type=button],
-nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
-nav li select {
- height: auto;
- margin-right: inherit;
- margin-bottom: 0;
- margin-left: inherit;
- padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
-}
-nav[aria-label=breadcrumb] {
- align-items: center;
- justify-content: start;
-}
-nav[aria-label=breadcrumb] ul li:not(:first-child) {
- margin-inline-start: var(--pico-nav-link-spacing-horizontal);
-}
-nav[aria-label=breadcrumb] ul li a {
- margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
- margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
-}
-nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
- display: inline-block;
- position: absolute;
- width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
- margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
- content: var(--pico-nav-breadcrumb-divider);
- color: var(--pico-muted-color);
- text-align: center;
- text-decoration: none;
- white-space: nowrap;
-}
-nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
- background-color: transparent;
- color: inherit;
- text-decoration: none;
- pointer-events: none;
-}
-
-aside nav,
-aside ol,
-aside ul,
-aside li {
- display: block;
-}
-aside li {
- padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal);
-}
-aside li a {
- display: block;
-}
-aside li [role=button] {
- margin: inherit;
-}
-
-[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
- content: "\\";
-}
-
-/**
- * Progress
- */
-progress {
- display: inline-block;
- vertical-align: baseline;
-}
-
-progress {
- -webkit-appearance: none;
- -moz-appearance: none;
- display: inline-block;
- appearance: none;
- width: 100%;
- height: 0.5rem;
- margin-bottom: calc(var(--pico-spacing) * 0.5);
- overflow: hidden;
- border: 0;
- border-radius: var(--pico-border-radius);
- background-color: var(--pico-progress-background-color);
- color: var(--pico-progress-color);
-}
-progress::-webkit-progress-bar {
- border-radius: var(--pico-border-radius);
- background: none;
-}
-progress[value]::-webkit-progress-value {
- background-color: var(--pico-progress-color);
- -webkit-transition: inline-size var(--pico-transition);
- transition: inline-size var(--pico-transition);
-}
-progress::-moz-progress-bar {
- background-color: var(--pico-progress-color);
-}
-@media (prefers-reduced-motion: no-preference) {
- progress:indeterminate {
- background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;
- animation: progress-indeterminate 1s linear infinite;
- }
- progress:indeterminate[value]::-webkit-progress-value {
- background-color: transparent;
- }
- progress:indeterminate::-moz-progress-bar {
- background-color: transparent;
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- [dir=rtl] progress:indeterminate {
- animation-direction: reverse;
- }
-}
-
-@keyframes progress-indeterminate {
- 0% {
- background-position: 200% 0;
- }
- 100% {
- background-position: -200% 0;
- }
-}
-/**
- * Tooltip ([data-tooltip])
- */
-[data-tooltip] {
- position: relative;
-}
-[data-tooltip]:not(a, button, input, [role=button]) {
- border-bottom: 1px dotted;
- text-decoration: none;
- cursor: help;
-}
-[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
- display: block;
- z-index: 99;
- position: absolute;
- bottom: 100%;
- left: 50%;
- padding: 0.25rem 0.5rem;
- overflow: hidden;
- transform: translate(-50%, -0.25rem);
- border-radius: var(--pico-border-radius);
- background: var(--pico-tooltip-background-color);
- content: attr(data-tooltip);
- color: var(--pico-tooltip-color);
- font-style: normal;
- font-weight: var(--pico-font-weight);
- font-size: 0.875rem;
- text-decoration: none;
- text-overflow: ellipsis;
- white-space: nowrap;
- opacity: 0;
- pointer-events: none;
-}
-[data-tooltip][data-placement=top]::after, [data-tooltip]::after {
- padding: 0;
- transform: translate(-50%, 0rem);
- border-top: 0.3rem solid;
- border-right: 0.3rem solid transparent;
- border-left: 0.3rem solid transparent;
- border-radius: 0;
- background-color: transparent;
- content: "";
- color: var(--pico-tooltip-background-color);
-}
-[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
- top: 100%;
- bottom: auto;
- transform: translate(-50%, 0.25rem);
-}
-[data-tooltip][data-placement=bottom]:after {
- transform: translate(-50%, -0.3rem);
- border: 0.3rem solid transparent;
- border-bottom: 0.3rem solid;
-}
-[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
- top: 50%;
- right: 100%;
- bottom: auto;
- left: auto;
- transform: translate(-0.25rem, -50%);
-}
-[data-tooltip][data-placement=left]:after {
- transform: translate(0.3rem, -50%);
- border: 0.3rem solid transparent;
- border-left: 0.3rem solid;
-}
-[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
- top: 50%;
- right: auto;
- bottom: auto;
- left: 100%;
- transform: translate(0.25rem, -50%);
-}
-[data-tooltip][data-placement=right]:after {
- transform: translate(-0.3rem, -50%);
- border: 0.3rem solid transparent;
- border-right: 0.3rem solid;
-}
-[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
- opacity: 1;
-}
-@media (hover: hover) and (pointer: fine) {
- [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
- --pico-tooltip-slide-to: translate(-50%, -0.25rem);
- transform: translate(-50%, 0.75rem);
- animation-duration: 0.2s;
- animation-fill-mode: forwards;
- animation-name: tooltip-slide;
- opacity: 0;
- }
- [data-tooltip]:focus::after, [data-tooltip]:hover::after {
- --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
- transform: translate(-50%, -0.25rem);
- animation-name: tooltip-caret-slide;
- }
- [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
- --pico-tooltip-slide-to: translate(-50%, 0.25rem);
- transform: translate(-50%, -0.75rem);
- animation-name: tooltip-slide;
- }
- [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
- --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
- transform: translate(-50%, -0.5rem);
- animation-name: tooltip-caret-slide;
- }
- [data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
- --pico-tooltip-slide-to: translate(-0.25rem, -50%);
- transform: translate(0.75rem, -50%);
- animation-name: tooltip-slide;
- }
- [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
- --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
- transform: translate(0.05rem, -50%);
- animation-name: tooltip-caret-slide;
- }
- [data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
- --pico-tooltip-slide-to: translate(0.25rem, -50%);
- transform: translate(-0.75rem, -50%);
- animation-name: tooltip-slide;
- }
- [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
- --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
- transform: translate(-0.05rem, -50%);
- animation-name: tooltip-caret-slide;
- }
-}
-@keyframes tooltip-slide {
- to {
- transform: var(--pico-tooltip-slide-to);
- opacity: 1;
- }
-}
-@keyframes tooltip-caret-slide {
- 50% {
- opacity: 0;
- }
- to {
- transform: var(--pico-tooltip-caret-slide-to);
- opacity: 1;
- }
-}
-
-/**
- * Accessibility & User interaction
- */
-[aria-controls] {
- cursor: pointer;
-}
-
-[aria-disabled=true],
-[disabled] {
- cursor: not-allowed;
-}
-
-[aria-hidden=false][hidden] {
- display: initial;
-}
-
-[aria-hidden=false][hidden]:not(:focus) {
- clip: rect(0, 0, 0, 0);
- position: absolute;
-}
-
-a,
-area,
-button,
-input,
-label,
-select,
-summary,
-textarea,
-[tabindex] {
- -ms-touch-action: manipulation;
-}
-
-[dir=rtl] {
- direction: rtl;
-}
-
-/**
- * Reduce Motion Features
- */
-@media (prefers-reduced-motion: reduce) {
- *:not([aria-busy=true]),
- :not([aria-busy=true])::before,
- :not([aria-busy=true])::after {
- background-attachment: initial !important;
- animation-duration: 1ms !important;
- animation-delay: -1ms !important;
- animation-iteration-count: 1 !important;
- scroll-behavior: auto !important;
- transition-delay: 0s !important;
- transition-duration: 0s !important;
- }
-}
diff --git a/frontend/src/components/audio-player/audio-player.ts b/frontend/src/components/audio-player/audio-player.ts
new file mode 100644
index 0000000..58f4271
--- /dev/null
+++ b/frontend/src/components/audio-player/audio-player.ts
@@ -0,0 +1,31 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Play } from '@go/player/Player';
+
+const audioPlayer = () => html`
+Hello World
+`;
+
+@customElement('audio-player')
+export class AudioPlayer extends LitElement {
+
+ render() {
+ return audioPlayer();
+ }
+
+ onPlayPauseButtonClick() {
+ let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
+ try {
+ Play().then((result) => {
+ console.log(result)
+ playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
+ }).catch((err) => {
+ console.log("There is an error with playing")
+ console.error(err);
+ });
+ }
+ catch (err) {
+ console.error(err);
+ }
+ }
+}
diff --git a/frontend/src/pages/config.html b/frontend/src/components/audio-player/controls/player-controls.css
similarity index 100%
rename from frontend/src/pages/config.html
rename to frontend/src/components/audio-player/controls/player-controls.css
diff --git a/frontend/src/components/audio-player/controls/player-controls.html b/frontend/src/components/audio-player/controls/player-controls.html
new file mode 100644
index 0000000..9259f20
--- /dev/null
+++ b/frontend/src/components/audio-player/controls/player-controls.html
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/frontend/src/components/audio-player/controls/player-controls.js b/frontend/src/components/audio-player/controls/player-controls.js
new file mode 100644
index 0000000..8864df6
--- /dev/null
+++ b/frontend/src/components/audio-player/controls/player-controls.js
@@ -0,0 +1,39 @@
+import { LitElement, html } from 'lit';
+import { Play } from '/wailsjs/go/player/Player';
+
+export class Player extends LitElement {
+ static properties = {
+ version: {},
+ };
+
+ constructor() {
+ super();
+ this.version = 'STARTING';
+ }
+
+ render() {
+ return html`
+ Welcome to the Lit tutorial!
+ This is the ${this.version} code.
+ `;
+ }
+
+ onPlayPauseButtonClick = function() {
+ let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
+ try {
+ Play().then((result) => {
+ console.log(result)
+ playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
+ }).catch((err) => {
+ console.log("There is an error with playing")
+ console.error(err);
+ });
+ }
+ catch (err) {
+ console.error(err);
+ }
+ }
+}
+customElements.define('player-controls', Player);
+
+
diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.css b/frontend/src/components/audio-player/seekbar/seek-bar.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.html b/frontend/src/components/audio-player/seekbar/seek-bar.html
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/audio-player/seekbar/seek-bar.js b/frontend/src/components/audio-player/seekbar/seek-bar.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/player.js b/frontend/src/components/player.js
deleted file mode 100644
index b82fadb..0000000
--- a/frontend/src/components/player.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import {LitElement, html} from 'lit';
-
-export class Player extends LitElement {
- static properties = {
- version: {},
- };
-
- constructor() {
- super();
- this.version = 'STARTING';
- }
-
- render() {
- return html`
- Welcome to the Lit tutorial!
- This is the ${this.version} code.
- `;
- }
-}
-customElements.define('player-controls', Player);
-
diff --git a/frontend/src/pages/config/config.html b/frontend/src/pages/config/config.html
new file mode 100644
index 0000000..2ce88cb
--- /dev/null
+++ b/frontend/src/pages/config/config.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+ yellowjacket - config
+
+
+
+
+
+
+
+ No Library Directory Selected
+ Choose Directory...
+
+
+
+
+
diff --git a/frontend/src/pages/config/config.js b/frontend/src/pages/config/config.js
new file mode 100644
index 0000000..09621bc
--- /dev/null
+++ b/frontend/src/pages/config/config.js
@@ -0,0 +1,30 @@
+import { DirectoryPicker } from '/wailsjs/go/frontendbindings/FrontendBindings.js';
+import { GetDir as GetLibraryDir } from '/wailsjs/go/library/Library.js';
+
+let libraryDirectoryLabel = document.getElementById("library-directory-label");
+
+window.updateLibraryDirLabel = function(value) {
+ libraryDirectoryLabel.innerText = value;
+}
+
+// on load update the library dir label
+GetLibraryDir().
+ then((result) => {
+ if (result.length === 0) { return; }
+ window.updateLibraryDirLabel(result);
+ }).catch((err) => { console.error(err) })
+
+
+window.dirPicker = function() {
+ try {
+ DirectoryPicker()
+ .then((result) => {
+ window.updateLibraryDirLabel(result); })
+ .catch((err) => {
+ console.error("There is an error with directory picker: " + err);
+ });
+ }
+ catch (err) {
+ console.error(err);
+ }
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..d000f5b
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import path from "path";
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ "@go": path.resolve(__dirname, "./wailsjs/go"),
+ "@components": path.resolve(__dirname, "./src/components"),
+ "@assets": path.resolve(__dirname, "./src/assets"),
+ },
+ },
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6b9b254
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "isolatedModules": true,
+ "baseUrl": "./frontend",
+ "allowJs": true,
+ "checkJs": true,
+ "noEmit": true,
+ "target": "ES2022",
+ "module": "ESNext",
+ "lib": [
+ "es2022",
+ "dom"
+ ],
+ "declaration": true,
+ "declarationMap": true,
+ "experimentalDecorators": true,
+ "useDefineForClassFields": false,
+ "moduleResolution": "node",
+ "plugins": [
+ {
+ "name": "ts-lit-plugin"
+ }
+ ],
+ "paths": {
+ "@go/*": ["wailsjs/go/*"],
+ "@components/*": ["src/components/*"],
+ "@assets/*": ["src/assets/*"],
+ }
+ }
+}
diff --git a/wails.json b/wails.json
index ad1c221..99bf71c 100644
--- a/wails.json
+++ b/wails.json
@@ -2,9 +2,9 @@
"$schema": "https://wails.io/schemas/config.v2.json",
"name": "yellowjacket",
"outputfilename": "yellowjacket",
- "frontend:install": "npm install",
- "frontend:build": "npm run build",
- "frontend:dev:watcher": "npm run dev",
+ "frontend:install": "pnpm install",
+ "frontend:build": "pnpm build",
+ "frontend:dev:watcher": "pnpm dev",
"frontend:dev:serverUrl": "auto",
"author": {
"name": "",
@@ -41,18 +40,9 @@