diff --git a/docs/ameframework.css b/docs/ameframework.css new file mode 100644 index 00000000..ec7826da --- /dev/null +++ b/docs/ameframework.css @@ -0,0 +1,1044 @@ +:root { + --appleEase: cubic-bezier(.42, 0, .58, 1); + --appleTransition: .2s var(--appleEase); +} + +/* Simple CSS framework for Apple Music Electron */ + +.md-labeltext { + font-size: 14px; + text-transform: uppercase; + opacity: 0.75; + font-weight: 500; +} + +.md-option-container { + border-radius: 10px; + overflow: hidden; +} + +.md-option-line { + display: flex; + width: 100%; + padding: 14px; + background: var(--opaquePageBGColor); + font-size: 0.85em; +} + +.md-option-segment.md-option-segment_auto { + width: auto; +} + +.md-option-container .md-option-line:not(:last-child) { + border-bottom: 1px solid rgb(0 0 0 / 15%); +} + +input[type="range"].md-slider { + -webkit-appearance: none; + height: 7px; + background: rgba(255, 255, 255, 0.6); + border-radius: 5px; + background-size: 70% 100%; + background-repeat: no-repeat; +} + +input[type="range"].md-slider::-webkit-slider-thumb { + -webkit-appearance: none; + height: 20px; + width: 20px; + border-radius: 50%; + background: rgb(255 255 255); + cursor: ew-resize; + box-shadow: 0 0 2px 0 #555; +} + +input[type=range].md-slider::-webkit-slider-runnable-track { + -webkit-appearance: none; + box-shadow: none; + border: none; + background: transparent; +} + +.md-option-segment { + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; +} + +.md-h1 { + font-size: 3em; + text-align: center; +} + +.md-header { + padding: 16px; +} + +.md-header-title { + padding: 18px; + font-weight: 600; + font-size: 16px; + height: 55px; + background: var(--opaquePageBGColor); + border-bottom: 1px solid rgb(0 0 0 / 15%); +} + +.md-footer { + padding: 16px; + text-align: center; +} + + +.md-close-btn { + -webkit-mask-image: url("ameres://icons/webui/close.svg"); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + background-color: white; + opacity: 0.75; + -webkit-mask-size: contain; + height: 18px; + width: 18px; +} + +.md-btn { + background: rgba(100, 100, 100, 0.5); + padding: 8px 16px; + border-radius: 4px; + font-size: 15px; + border: 1px solid rgb(100 100 100 / 35%); + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4); +} + +.md-btn.md-btn-block { + display: block; +} + +.md-btn:active { + filter: brightness(75%); +} + +.md-select { + padding: 5px 10px; + font-size: 1em; + font-family: inherit; + border-radius: 4px; + border: 1px solid rgb(100 100 100 / 35%); + box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4); +} + +.md-select:focus { + outline: none; +} + +.md-select > option { + font-size: 1em; + font-family: inherit; + padding: 8px 16px; +} + +.md-btn.md-btn-primary { + background: var(--keyColor); + color: white; +} + +.md-transparent { + background: transparent; +} + +.md-container { + display: flex; + flex-direction: column; + height: 100%; + position: absolute; + top: 0px; + left: 0px; + width: 100%; + padding: 32px; +} + +.md-container_panel { + padding: 0px; +} + +.md-body { + height: 100%; + padding: 16px; + font-size: 1.25em; +} + +@media (prefers-color-scheme: light) { + .md-btn { + background: rgb(255 255 255); + box-shadow: rgb(0 0 0 / 10%) 0px 0px 1px, rgb(0 0 0 / 20%) 0px 1px 1px; + border: 1px solid rgb(0 0 0 / 15%); + } + + .md-close-btn { + background-color: #000; + } +} + +/* Vue transitions */ +.fade_simple-enter-active, .fade_simple-leave-active { + transition: all .5s; +} + +.fade_simple-enter, .fade_simple-leave-to { + opacity: 0; +} + +.fade-enter-active, .fade-leave-active { + transition: all .5s; +} + +.fade-enter, .fade-leave-to { + opacity: 0; + transform: scale(0.95); +} + +/* CSS Grids */ + +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} + +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-0.5 * var(--bs-gutter-x)); + margin-left: calc(-0.5 * var(--bs-gutter-x)); +} + +.row > * { + box-sizing: border-box; + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * 0.5); + padding-left: calc(var(--bs-gutter-x) * 0.5); + margin-top: var(--bs-gutter-y); +} + +.col { + flex: 1 0 0%; +} + +.row-cols-auto > * { + flex: 0 0 auto; + width: auto; +} + +.row-cols-1 > * { + flex: 0 0 auto; + width: 100%; +} + +.row-cols-2 > * { + flex: 0 0 auto; + width: 50%; +} + +.row-cols-3 > * { + flex: 0 0 auto; + width: 33.3333333333%; +} + +.row-cols-4 > * { + flex: 0 0 auto; + width: 25%; +} + +.row-cols-5 > * { + flex: 0 0 auto; + width: 20%; +} + +.row-cols-6 > * { + flex: 0 0 auto; + width: 16.6666666667%; +} + +.col-auto { + flex: 0 0 auto; + width: auto; +} + +.col-1 { + flex: 0 0 auto; + width: 8.33333333%; +} + +.col-2 { + flex: 0 0 auto; + width: 16.66666667%; +} + +.col-3 { + flex: 0 0 auto; + width: 25%; +} + +.col-4 { + flex: 0 0 auto; + width: 33.33333333%; +} + +.col-5 { + flex: 0 0 auto; + width: 41.66666667%; +} + +.col-6 { + flex: 0 0 auto; + width: 50%; +} + +.col-7 { + flex: 0 0 auto; + width: 58.33333333%; +} + +.col-8 { + flex: 0 0 auto; + width: 66.66666667%; +} + +.col-9 { + flex: 0 0 auto; + width: 75%; +} + +.col-10 { + flex: 0 0 auto; + width: 83.33333333%; +} + +.col-11 { + flex: 0 0 auto; + width: 91.66666667%; +} + +.col-12 { + flex: 0 0 auto; + width: 100%; +} + +.offset-1 { + margin-left: 8.33333333%; +} + +.offset-2 { + margin-left: 16.66666667%; +} + +.offset-3 { + margin-left: 25%; +} + +.offset-4 { + margin-left: 33.33333333%; +} + +.offset-5 { + margin-left: 41.66666667%; +} + +.offset-6 { + margin-left: 50%; +} + +.offset-7 { + margin-left: 58.33333333%; +} + +.offset-8 { + margin-left: 66.66666667%; +} + +.offset-9 { + margin-left: 75%; +} + +.offset-10 { + margin-left: 83.33333333%; +} + +.offset-11 { + margin-left: 91.66666667%; +} + +.g-0, +.gx-0 { + --bs-gutter-x: 0; +} + +.g-0, +.gy-0 { + --bs-gutter-y: 0; +} + +.g-1, +.gx-1 { + --bs-gutter-x: 0.25rem; +} + +.g-1, +.gy-1 { + --bs-gutter-y: 0.25rem; +} + +.g-2, +.gx-2 { + --bs-gutter-x: 0.5rem; +} + +.g-2, +.gy-2 { + --bs-gutter-y: 0.5rem; +} + +.g-3, +.gx-3 { + --bs-gutter-x: 1rem; +} + +.g-3, +.gy-3 { + --bs-gutter-y: 1rem; +} + +.g-4, +.gx-4 { + --bs-gutter-x: 1.5rem; +} + +.g-4, +.gy-4 { + --bs-gutter-y: 1.5rem; +} + +.g-5, +.gx-5 { + --bs-gutter-x: 3rem; +} + +.g-5, +.gy-5 { + --bs-gutter-y: 3rem; +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-block { + display: block !important; +} + +.d-grid { + display: grid !important; +} + +.d-table { + display: table !important; +} + +.d-table-row { + display: table-row !important; +} + +.d-table-cell { + display: table-cell !important; +} + +.d-flex { + display: flex !important; +} + +.d-inline-flex { + display: inline-flex !important; +} + +.d-none { + display: none !important; +} + +.flex-fill { + flex: 1 1 auto !important; +} + +.flex-row { + flex-direction: row !important; +} + +.flex-column { + flex-direction: column !important; +} + +.flex-row-reverse { + flex-direction: row-reverse !important; +} + +.flex-column-reverse { + flex-direction: column-reverse !important; +} + +.flex-grow-0 { + flex-grow: 0 !important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.flex-shrink-0 { + flex-shrink: 0 !important; +} + +.flex-shrink-1 { + flex-shrink: 1 !important; +} + +.flex-wrap { + flex-wrap: wrap !important; +} + +.flex-nowrap { + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; +} + +.justify-content-start { + justify-content: flex-start !important; +} + +.justify-content-end { + justify-content: flex-end !important; +} + +.justify-content-center { + justify-content: center !important; +} + +.justify-content-between { + justify-content: space-between !important; +} + +.justify-content-around { + justify-content: space-around !important; +} + +.justify-content-evenly { + justify-content: space-evenly !important; +} + +.align-items-start { + align-items: flex-start !important; +} + +.align-items-end { + align-items: flex-end !important; +} + +.align-items-center { + align-items: center !important; +} + +.align-items-baseline { + align-items: baseline !important; +} + +.align-items-stretch { + align-items: stretch !important; +} + +.align-content-start { + align-content: flex-start !important; +} + +.align-content-end { + align-content: flex-end !important; +} + +.align-content-center { + align-content: center !important; +} + +.align-content-between { + align-content: space-between !important; +} + +.align-content-around { + align-content: space-around !important; +} + +.align-content-stretch { + align-content: stretch !important; +} + +.align-self-auto { + align-self: auto !important; +} + +.align-self-start { + align-self: flex-start !important; +} + +.align-self-end { + align-self: flex-end !important; +} + +.align-self-center { + align-self: center !important; +} + +.align-self-baseline { + align-self: baseline !important; +} + +.align-self-stretch { + align-self: stretch !important; +} + +.order-first { + order: -1 !important; +} + +.order-0 { + order: 0 !important; +} + +.order-1 { + order: 1 !important; +} + +.order-2 { + order: 2 !important; +} + +.order-3 { + order: 3 !important; +} + +.order-4 { + order: 4 !important; +} + +.order-5 { + order: 5 !important; +} + +.order-last { + order: 6 !important; +} + +.m-0 { + margin: 0 !important; +} + +.m-1 { + margin: 0.25rem !important; +} + +.m-2 { + margin: 0.5rem !important; +} + +.m-3 { + margin: 1rem !important; +} + +.m-4 { + margin: 1.5rem !important; +} + +.m-5 { + margin: 3rem !important; +} + +.m-auto { + margin: auto !important; +} + +.mx-0 { + margin-right: 0 !important; + margin-left: 0 !important; +} + +.mx-1 { + margin-right: 0.25rem !important; + margin-left: 0.25rem !important; +} + +.mx-2 { + margin-right: 0.5rem !important; + margin-left: 0.5rem !important; +} + +.mx-3 { + margin-right: 1rem !important; + margin-left: 1rem !important; +} + +.mx-4 { + margin-right: 1.5rem !important; + margin-left: 1.5rem !important; +} + +.mx-5 { + margin-right: 3rem !important; + margin-left: 3rem !important; +} + +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.my-3 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.my-5 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.mt-1 { + margin-top: 0.25rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mt-3 { + margin-top: 1rem !important; +} + +.mt-4 { + margin-top: 1.5rem !important; +} + +.mt-5 { + margin-top: 3rem !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.me-0 { + margin-right: 0 !important; +} + +.me-1 { + margin-right: 0.25rem !important; +} + +.me-2 { + margin-right: 0.5rem !important; +} + +.me-3 { + margin-right: 1rem !important; +} + +.me-4 { + margin-right: 1.5rem !important; +} + +.me-5 { + margin-right: 3rem !important; +} + +.me-auto { + margin-right: auto !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.mb-3 { + margin-bottom: 1rem !important; +} + +.mb-4 { + margin-bottom: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 3rem !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ms-0 { + margin-left: 0 !important; +} + +.ms-1 { + margin-left: 0.25rem !important; +} + +.ms-2 { + margin-left: 0.5rem !important; +} + +.ms-3 { + margin-left: 1rem !important; +} + +.ms-4 { + margin-left: 1.5rem !important; +} + +.ms-5 { + margin-left: 3rem !important; +} + +.ms-auto { + margin-left: auto !important; +} + +.p-0 { + padding: 0 !important; +} + +.p-1 { + padding: 0.25rem !important; +} + +.p-2 { + padding: 0.5rem !important; +} + +.p-3 { + padding: 1rem !important; +} + +.p-4 { + padding: 1.5rem !important; +} + +.p-5 { + padding: 3rem !important; +} + +.px-0 { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.px-1 { + padding-right: 0.25rem !important; + padding-left: 0.25rem !important; +} + +.px-2 { + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; +} + +.px-3 { + padding-right: 1rem !important; + padding-left: 1rem !important; +} + +.px-4 { + padding-right: 1.5rem !important; + padding-left: 1.5rem !important; +} + +.px-5 { + padding-right: 3rem !important; + padding-left: 3rem !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.py-3 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.py-4 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.py-5 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.pt-0 { + padding-top: 0 !important; +} + +.pt-1 { + padding-top: 0.25rem !important; +} + +.pt-2 { + padding-top: 0.5rem !important; +} + +.pt-3 { + padding-top: 1rem !important; +} + +.pt-4 { + padding-top: 1.5rem !important; +} + +.pt-5 { + padding-top: 3rem !important; +} + +.pe-0 { + padding-right: 0 !important; +} + +.pe-1 { + padding-right: 0.25rem !important; +} + +.pe-2 { + padding-right: 0.5rem !important; +} + +.pe-3 { + padding-right: 1rem !important; +} + +.pe-4 { + padding-right: 1.5rem !important; +} + +.pe-5 { + padding-right: 3rem !important; +} + +.pb-0 { + padding-bottom: 0 !important; +} + +.pb-1 { + padding-bottom: 0.25rem !important; +} + +.pb-2 { + padding-bottom: 0.5rem !important; +} + +.pb-3 { + padding-bottom: 1rem !important; +} + +.pb-4 { + padding-bottom: 1.5rem !important; +} + +.pb-5 { + padding-bottom: 3rem !important; +} + +.ps-0 { + padding-left: 0 !important; +} + +.ps-1 { + padding-left: 0.25rem !important; +} + +.ps-2 { + padding-left: 0.5rem !important; +} + +.ps-3 { + padding-left: 1rem !important; +} + +.ps-4 { + padding-left: 1.5rem !important; +} + +.ps-5 { + padding-left: 3rem !important; +} \ No newline at end of file diff --git a/docs/assets/arrow-left.svg b/docs/assets/arrow-left.svg new file mode 100644 index 00000000..41098a56 --- /dev/null +++ b/docs/assets/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/backward.svg b/docs/assets/backward.svg new file mode 100644 index 00000000..4c445c05 --- /dev/null +++ b/docs/assets/backward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/cast_white.svg b/docs/assets/cast_white.svg new file mode 100644 index 00000000..a84aed59 --- /dev/null +++ b/docs/assets/cast_white.svg @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/docs/assets/forward.svg b/docs/assets/forward.svg new file mode 100644 index 00000000..37b509f1 --- /dev/null +++ b/docs/assets/forward.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/list.svg b/docs/assets/list.svg new file mode 100644 index 00000000..5a8ca2c3 --- /dev/null +++ b/docs/assets/list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/pause.svg b/docs/assets/pause.svg new file mode 100644 index 00000000..2e9ab6fd --- /dev/null +++ b/docs/assets/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/play.svg b/docs/assets/play.svg new file mode 100644 index 00000000..f6296da5 --- /dev/null +++ b/docs/assets/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/quote-right.svg b/docs/assets/quote-right.svg new file mode 100644 index 00000000..629ab4ee --- /dev/null +++ b/docs/assets/quote-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/repeat.svg b/docs/assets/repeat.svg new file mode 100644 index 00000000..0c283cf4 --- /dev/null +++ b/docs/assets/repeat.svg @@ -0,0 +1,47 @@ + + + + diff --git a/docs/assets/search.svg b/docs/assets/search.svg new file mode 100644 index 00000000..62953986 --- /dev/null +++ b/docs/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/shuffle.svg b/docs/assets/shuffle.svg new file mode 100644 index 00000000..5ac0b6ae --- /dev/null +++ b/docs/assets/shuffle.svg @@ -0,0 +1,45 @@ + + + + diff --git a/docs/assets/volume-down.svg b/docs/assets/volume-down.svg new file mode 100644 index 00000000..87c9f9fc --- /dev/null +++ b/docs/assets/volume-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/volume-up.svg b/docs/assets/volume-up.svg new file mode 100644 index 00000000..05db44e8 --- /dev/null +++ b/docs/assets/volume-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..685a752f --- /dev/null +++ b/docs/index.html @@ -0,0 +1,157 @@ + + + +
+ + + +