mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-08 09:11:46 +00:00
Add Material UI 3 component library (#3606)
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Angelos Bouklis
GitHub
607
assets/mdui.css
Normal file
607
assets/mdui.css
Normal file
@ -0,0 +1,607 @@
|
||||
:root {
|
||||
--mdui-breakpoint-xs: 0px;
|
||||
--mdui-breakpoint-sm: 600px;
|
||||
--mdui-breakpoint-md: 840px;
|
||||
--mdui-breakpoint-lg: 1080px;
|
||||
--mdui-breakpoint-xl: 1440px;
|
||||
--mdui-breakpoint-xxl: 1920px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--mdui-color-primary-light: 103, 80, 164;
|
||||
--mdui-color-primary-container-light: 234, 221, 255;
|
||||
--mdui-color-on-primary-light: 255, 255, 255;
|
||||
--mdui-color-on-primary-container-light: 33, 0, 94;
|
||||
--mdui-color-inverse-primary-light: 208, 188, 255;
|
||||
--mdui-color-secondary-light: 98, 91, 113;
|
||||
--mdui-color-secondary-container-light: 232, 222, 248;
|
||||
--mdui-color-on-secondary-light: 255, 255, 255;
|
||||
--mdui-color-on-secondary-container-light: 30, 25, 43;
|
||||
--mdui-color-tertiary-light: 125, 82, 96;
|
||||
--mdui-color-tertiary-container-light: 255, 216, 228;
|
||||
--mdui-color-on-tertiary-light: 255, 255, 255;
|
||||
--mdui-color-on-tertiary-container-light: 55, 11, 30;
|
||||
--mdui-color-surface-light: 254, 247, 255;
|
||||
--mdui-color-surface-dim-light: 222, 216, 225;
|
||||
--mdui-color-surface-bright-light: 254, 247, 255;
|
||||
--mdui-color-surface-container-lowest-light: 255, 255, 255;
|
||||
--mdui-color-surface-container-low-light: 247, 242, 250;
|
||||
--mdui-color-surface-container-light: 243, 237, 247;
|
||||
--mdui-color-surface-container-high-light: 236, 230, 240;
|
||||
--mdui-color-surface-container-highest-light: 230, 224, 233;
|
||||
--mdui-color-surface-variant-light: 231, 224, 236;
|
||||
--mdui-color-on-surface-light: 28, 27, 31;
|
||||
--mdui-color-on-surface-variant-light: 73, 69, 78;
|
||||
--mdui-color-inverse-surface-light: 49, 48, 51;
|
||||
--mdui-color-inverse-on-surface-light: 244, 239, 244;
|
||||
--mdui-color-background-light: 254, 247, 255;
|
||||
--mdui-color-on-background-light: 28, 27, 31;
|
||||
--mdui-color-error-light: 179, 38, 30;
|
||||
--mdui-color-error-container-light: 249, 222, 220;
|
||||
--mdui-color-on-error-light: 255, 255, 255;
|
||||
--mdui-color-on-error-container-light: 65, 14, 11;
|
||||
--mdui-color-outline-light: 121, 116, 126;
|
||||
--mdui-color-outline-variant-light: 196, 199, 197;
|
||||
--mdui-color-shadow-light: 0, 0, 0;
|
||||
--mdui-color-surface-tint-color-light: 103, 80, 164;
|
||||
--mdui-color-scrim-light: 0, 0, 0;
|
||||
--mdui-color-primary-dark: 208, 188, 255;
|
||||
--mdui-color-primary-container-dark: 79, 55, 139;
|
||||
--mdui-color-on-primary-dark: 55, 30, 115;
|
||||
--mdui-color-on-primary-container-dark: 234, 221, 255;
|
||||
--mdui-color-inverse-primary-dark: 103, 80, 164;
|
||||
--mdui-color-secondary-dark: 204, 194, 220;
|
||||
--mdui-color-secondary-container-dark: 74, 68, 88;
|
||||
--mdui-color-on-secondary-dark: 51, 45, 65;
|
||||
--mdui-color-on-secondary-container-dark: 232, 222, 248;
|
||||
--mdui-color-tertiary-dark: 239, 184, 200;
|
||||
--mdui-color-tertiary-container-dark: 99, 59, 72;
|
||||
--mdui-color-on-tertiary-dark: 73, 37, 50;
|
||||
--mdui-color-on-tertiary-container-dark: 255, 216, 228;
|
||||
--mdui-color-surface-dark: 20, 18, 24;
|
||||
--mdui-color-surface-dim-dark: 20, 18, 24;
|
||||
--mdui-color-surface-bright-dark: 59, 56, 62;
|
||||
--mdui-color-surface-container-lowest-dark: 15, 13, 19;
|
||||
--mdui-color-surface-container-low-dark: 29, 27, 32;
|
||||
--mdui-color-surface-container-dark: 33, 31, 38;
|
||||
--mdui-color-surface-container-high-dark: 43, 41, 48;
|
||||
--mdui-color-surface-container-highest-dark: 54, 52, 59;
|
||||
--mdui-color-surface-variant-dark: 73, 69, 79;
|
||||
--mdui-color-on-surface-dark: 230, 225, 229;
|
||||
--mdui-color-on-surface-variant-dark: 202, 196, 208;
|
||||
--mdui-color-inverse-surface-dark: 230, 225, 229;
|
||||
--mdui-color-inverse-on-surface-dark: 49, 48, 51;
|
||||
--mdui-color-background-dark: 20, 18, 24;
|
||||
--mdui-color-on-background-dark: 230, 225, 229;
|
||||
--mdui-color-error-dark: 242, 184, 181;
|
||||
--mdui-color-error-container-dark: 140, 29, 24;
|
||||
--mdui-color-on-error-dark: 96, 20, 16;
|
||||
--mdui-color-on-error-container-dark: 249, 222, 220;
|
||||
--mdui-color-outline-dark: 147, 143, 153;
|
||||
--mdui-color-outline-variant-dark: 68, 71, 70;
|
||||
--mdui-color-shadow-dark: 0, 0, 0;
|
||||
--mdui-color-surface-tint-color-dark: 208, 188, 255;
|
||||
--mdui-color-scrim-dark: 0, 0, 0;
|
||||
}
|
||||
|
||||
.mdui-theme-dark,
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--mdui-color-primary: var(--mdui-color-primary-dark);
|
||||
--mdui-color-primary-container: var(--mdui-color-primary-container-dark);
|
||||
--mdui-color-on-primary: var(--mdui-color-on-primary-dark);
|
||||
--mdui-color-on-primary-container: var(
|
||||
--mdui-color-on-primary-container-dark
|
||||
);
|
||||
--mdui-color-inverse-primary: var(--mdui-color-inverse-primary-dark);
|
||||
--mdui-color-secondary: var(--mdui-color-secondary-dark);
|
||||
--mdui-color-secondary-container: var(--mdui-color-secondary-container-dark);
|
||||
--mdui-color-on-secondary: var(--mdui-color-on-secondary-dark);
|
||||
--mdui-color-on-secondary-container: var(
|
||||
--mdui-color-on-secondary-container-dark
|
||||
);
|
||||
--mdui-color-tertiary: var(--mdui-color-tertiary-dark);
|
||||
--mdui-color-tertiary-container: var(--mdui-color-tertiary-container-dark);
|
||||
--mdui-color-on-tertiary: var(--mdui-color-on-tertiary-dark);
|
||||
--mdui-color-on-tertiary-container: var(
|
||||
--mdui-color-on-tertiary-container-dark
|
||||
);
|
||||
--mdui-color-surface: var(--mdui-color-surface-dark);
|
||||
--mdui-color-surface-dim: var(--mdui-color-surface-dim-dark);
|
||||
--mdui-color-surface-bright: var(--mdui-color-surface-bright-dark);
|
||||
--mdui-color-surface-container-lowest: var(
|
||||
--mdui-color-surface-container-lowest-dark
|
||||
);
|
||||
--mdui-color-surface-container-low: var(
|
||||
--mdui-color-surface-container-low-dark
|
||||
);
|
||||
--mdui-color-surface-container: var(--mdui-color-surface-container-dark);
|
||||
--mdui-color-surface-container-high: var(
|
||||
--mdui-color-surface-container-high-dark
|
||||
);
|
||||
--mdui-color-surface-container-highest: var(
|
||||
--mdui-color-surface-container-highest-dark
|
||||
);
|
||||
--mdui-color-surface-variant: var(--mdui-color-surface-variant-dark);
|
||||
--mdui-color-on-surface: var(--mdui-color-on-surface-dark);
|
||||
--mdui-color-on-surface-variant: var(--mdui-color-on-surface-variant-dark);
|
||||
--mdui-color-inverse-surface: var(--mdui-color-inverse-surface-dark);
|
||||
--mdui-color-inverse-on-surface: var(--mdui-color-inverse-on-surface-dark);
|
||||
--mdui-color-background: var(--mdui-color-background-dark);
|
||||
--mdui-color-on-background: var(--mdui-color-on-background-dark);
|
||||
--mdui-color-error: var(--mdui-color-error-dark);
|
||||
--mdui-color-error-container: var(--mdui-color-error-container-dark);
|
||||
--mdui-color-on-error: var(--mdui-color-on-error-dark);
|
||||
--mdui-color-on-error-container: var(--mdui-color-on-error-container-dark);
|
||||
--mdui-color-outline: var(--mdui-color-outline-dark);
|
||||
--mdui-color-outline-variant: var(--mdui-color-outline-variant-dark);
|
||||
--mdui-color-shadow: var(--mdui-color-shadow-dark);
|
||||
--mdui-color-surface-tint-color: var(--mdui-color-surface-tint-color-dark);
|
||||
--mdui-color-scrim: var(--mdui-color-scrim-dark);
|
||||
color: rgb(var(--mdui-color-on-background));
|
||||
background-color: rgb(var(--mdui-color-background));
|
||||
}
|
||||
|
||||
:root {
|
||||
--mdui-elevation-level0: none;
|
||||
--mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
|
||||
0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
|
||||
--mdui-elevation-level2: 0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%),
|
||||
0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
|
||||
--mdui-elevation-level3: 0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%),
|
||||
0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%);
|
||||
--mdui-elevation-level4: 0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%),
|
||||
0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%);
|
||||
--mdui-elevation-level5: 0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%),
|
||||
0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%);
|
||||
}
|
||||
|
||||
:root {
|
||||
--mdui-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
|
||||
--mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--mdui-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
||||
--mdui-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
||||
--mdui-motion-easing-emphasized: var(--mdui-motion-easing-standard);
|
||||
--mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
--mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
--mdui-motion-duration-short1: 50ms;
|
||||
--mdui-motion-duration-short2: 100ms;
|
||||
--mdui-motion-duration-short3: 150ms;
|
||||
--mdui-motion-duration-short4: 200ms;
|
||||
--mdui-motion-duration-medium1: 250ms;
|
||||
--mdui-motion-duration-medium2: 300ms;
|
||||
--mdui-motion-duration-medium3: 350ms;
|
||||
--mdui-motion-duration-medium4: 400ms;
|
||||
--mdui-motion-duration-long1: 450ms;
|
||||
--mdui-motion-duration-long2: 500ms;
|
||||
--mdui-motion-duration-long3: 550ms;
|
||||
--mdui-motion-duration-long4: 600ms;
|
||||
--mdui-motion-duration-extra-long1: 700ms;
|
||||
--mdui-motion-duration-extra-long2: 800ms;
|
||||
--mdui-motion-duration-extra-long3: 900ms;
|
||||
--mdui-motion-duration-extra-long4: 1000ms;
|
||||
}
|
||||
|
||||
.mdui-prose {
|
||||
line-height: 1.75;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.mdui-prose :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mdui-prose :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mdui-prose code,
|
||||
.mdui-prose kbd,
|
||||
.mdui-prose pre,
|
||||
.mdui-prose pre tt,
|
||||
.mdui-prose samp {
|
||||
font-family: Consolas, Courier, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.mdui-prose caption {
|
||||
text-align: left;
|
||||
}
|
||||
.mdui-prose [draggable='true'],
|
||||
.mdui-prose [draggable] {
|
||||
cursor: move;
|
||||
}
|
||||
.mdui-prose [draggable='false'] {
|
||||
cursor: inherit;
|
||||
}
|
||||
.mdui-prose dl,
|
||||
.mdui-prose form,
|
||||
.mdui-prose ol,
|
||||
.mdui-prose p,
|
||||
.mdui-prose ul {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
.mdui-prose a {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
color: rgb(var(--mdui-color-primary));
|
||||
}
|
||||
.mdui-prose a:focus,
|
||||
.mdui-prose a:hover {
|
||||
border-bottom: 0.0625rem solid rgb(var(--mdui-color-primary));
|
||||
}
|
||||
.mdui-prose small {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.mdui-prose strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.mdui-prose blockquote {
|
||||
margin: 1.6em 2em;
|
||||
padding-left: 1em;
|
||||
border-left: 0.25rem solid rgb(var(--mdui-color-surface-variant));
|
||||
}
|
||||
@media only screen and (max-width: 599.98px) {
|
||||
.mdui-prose blockquote {
|
||||
margin: 1.6em 0;
|
||||
}
|
||||
}
|
||||
.mdui-prose blockquote footer {
|
||||
font-size: 86%;
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose mark {
|
||||
color: inherit;
|
||||
background-color: rgb(var(--mdui-color-secondary-container));
|
||||
border-bottom: 0.0625rem solid rgb(var(--mdui-color-secondary));
|
||||
margin: 0 0.375rem;
|
||||
padding: 0.125rem;
|
||||
}
|
||||
.mdui-prose h1,
|
||||
.mdui-prose h2,
|
||||
.mdui-prose h3,
|
||||
.mdui-prose h4,
|
||||
.mdui-prose h5,
|
||||
.mdui-prose h6 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.mdui-prose h1 small,
|
||||
.mdui-prose h2 small,
|
||||
.mdui-prose h3 small,
|
||||
.mdui-prose h4 small,
|
||||
.mdui-prose h5 small,
|
||||
.mdui-prose h6 small {
|
||||
font-weight: inherit;
|
||||
font-size: 65%;
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose h1 strong,
|
||||
.mdui-prose h2 strong,
|
||||
.mdui-prose h3 strong,
|
||||
.mdui-prose h4 strong,
|
||||
.mdui-prose h5 strong,
|
||||
.mdui-prose h6 strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.mdui-prose h1 {
|
||||
font-size: 2.5em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.25em;
|
||||
line-height: 1.1111;
|
||||
}
|
||||
.mdui-prose h2 {
|
||||
font-size: 1.875em;
|
||||
margin-top: 2.25em;
|
||||
margin-bottom: 1.125em;
|
||||
line-height: 1.3333;
|
||||
}
|
||||
.mdui-prose h3 {
|
||||
font-size: 1.5em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.mdui-prose h4 {
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.875em;
|
||||
margin-bottom: 0.875em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.mdui-prose h2 + *,
|
||||
.mdui-prose h3 + *,
|
||||
.mdui-prose h4 + *,
|
||||
.mdui-prose hr + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mdui-prose code,
|
||||
.mdui-prose kbd {
|
||||
font-size: 0.875em;
|
||||
color: rgb(var(--mdui-color-on-surface-container));
|
||||
background-color: rgba(var(--mdui-color-surface-variant), 0.28);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: var(--mdui-shape-corner-extra-small);
|
||||
}
|
||||
.mdui-prose kbd {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.mdui-prose abbr[title] {
|
||||
text-decoration: none;
|
||||
cursor: help;
|
||||
border-bottom: 0.0625rem dotted rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose ins,
|
||||
.mdui-prose u {
|
||||
text-decoration: none;
|
||||
border-bottom: 0.0625rem solid rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.mdui-prose hr {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
border: none;
|
||||
border-bottom: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
}
|
||||
.mdui-prose pre {
|
||||
margin-top: 1.7143em;
|
||||
margin-bottom: 1.7143em;
|
||||
}
|
||||
.mdui-prose pre code {
|
||||
padding: 0.8571em 1.1429em;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: rgb(var(--mdui-color-surface-container));
|
||||
color: rgb(var(--mdui-color-on-surface-container));
|
||||
border-radius: var(--mdui-shape-corner-extra-small);
|
||||
}
|
||||
.mdui-prose ol,
|
||||
.mdui-prose ul {
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
.mdui-prose ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
.mdui-prose ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.mdui-prose ol[type='A'] {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
.mdui-prose ol[type='a'] {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
.mdui-prose ol[type='I'] {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
.mdui-prose ol[type='i'] {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
.mdui-prose ol[type='1'] {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
.mdui-prose li {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.mdui-prose ol > li,
|
||||
.mdui-prose ul > li {
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
.mdui-prose ol > li > p,
|
||||
.mdui-prose ul > li > p {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
.mdui-prose ol > li > :first-child,
|
||||
.mdui-prose ul > li > :first-child {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
.mdui-prose ol > li > :last-child,
|
||||
.mdui-prose ul > li > :last-child {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
.mdui-prose ol > li::marker {
|
||||
font-weight: 400;
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose ul > li::marker {
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose ol ol,
|
||||
.mdui-prose ol ul,
|
||||
.mdui-prose ul ol,
|
||||
.mdui-prose ul ul {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
.mdui-prose fieldset,
|
||||
.mdui-prose img {
|
||||
border: none;
|
||||
}
|
||||
.mdui-prose figure,
|
||||
.mdui-prose img,
|
||||
.mdui-prose video {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
max-width: 100%;
|
||||
}
|
||||
.mdui-prose figure > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.mdui-prose figcaption {
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4286;
|
||||
margin-top: 0.8571em;
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose figcaption:empty::before {
|
||||
z-index: -1;
|
||||
cursor: text;
|
||||
content: attr(placeholder);
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
}
|
||||
.mdui-prose table {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
border: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
border-radius: var(--mdui-shape-corner-large);
|
||||
}
|
||||
.mdui-table {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
border: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
border-radius: var(--mdui-shape-corner-large);
|
||||
}
|
||||
.mdui-table table {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.mdui-prose table,
|
||||
.mdui-table table {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
.mdui-prose td,
|
||||
.mdui-prose th,
|
||||
.mdui-table td,
|
||||
.mdui-table th {
|
||||
border-top: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
}
|
||||
.mdui-prose td:not(:first-child),
|
||||
.mdui-prose th:not(:first-child),
|
||||
.mdui-table td:not(:first-child),
|
||||
.mdui-table th:not(:first-child) {
|
||||
border-left: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
}
|
||||
.mdui-prose td:not(:last-child),
|
||||
.mdui-prose th:not(:last-child),
|
||||
.mdui-table td:not(:last-child),
|
||||
.mdui-table th:not(:last-child) {
|
||||
border-right: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
|
||||
}
|
||||
.mdui-prose tfoot td,
|
||||
.mdui-prose tfoot th,
|
||||
.mdui-prose thead td,
|
||||
.mdui-prose thead th,
|
||||
.mdui-table tfoot td,
|
||||
.mdui-table tfoot th,
|
||||
.mdui-table thead td,
|
||||
.mdui-table thead th {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 1.125rem 1rem;
|
||||
font-weight: var(--mdui-typescale-title-medium-weight);
|
||||
letter-spacing: var(--mdui-typescale-title-medium-tracking);
|
||||
line-height: var(--mdui-typescale-title-medium-line-height);
|
||||
color: rgb(var(--mdui-color-on-surface-variant));
|
||||
box-shadow: var(--mdui-elevation-level1);
|
||||
}
|
||||
.mdui-prose tbody td,
|
||||
.mdui-prose tbody th,
|
||||
.mdui-table tbody td,
|
||||
.mdui-table tbody th {
|
||||
padding: 0.875rem 1rem;
|
||||
}
|
||||
.mdui-prose tbody th,
|
||||
.mdui-table tbody th {
|
||||
vertical-align: middle;
|
||||
font-weight: inherit;
|
||||
}
|
||||
.mdui-prose tbody td,
|
||||
.mdui-table tbody td {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.mdui-prose tbody:first-child tr:first-child td,
|
||||
.mdui-prose thead:first-child tr:first-child th,
|
||||
.mdui-table tbody:first-child tr:first-child td,
|
||||
.mdui-table thead:first-child tr:first-child th {
|
||||
border-top: 0;
|
||||
}
|
||||
:root {
|
||||
--mdui-shape-corner-none: 0;
|
||||
--mdui-shape-corner-extra-small: 0.25rem;
|
||||
--mdui-shape-corner-small: 0.5rem;
|
||||
--mdui-shape-corner-medium: 0.75rem;
|
||||
--mdui-shape-corner-large: 1rem;
|
||||
--mdui-shape-corner-extra-large: 1.75rem;
|
||||
--mdui-shape-corner-full: 1000rem;
|
||||
}
|
||||
:root {
|
||||
--mdui-state-layer-hover: 0.08;
|
||||
--mdui-state-layer-focus: 0.12;
|
||||
--mdui-state-layer-pressed: 0.12;
|
||||
--mdui-state-layer-dragged: 0.16;
|
||||
}
|
||||
:root {
|
||||
--mdui-typescale-display-large-weight: 400;
|
||||
--mdui-typescale-display-medium-weight: 400;
|
||||
--mdui-typescale-display-small-weight: 400;
|
||||
--mdui-typescale-display-large-line-height: 4rem;
|
||||
--mdui-typescale-display-medium-line-height: 3.25rem;
|
||||
--mdui-typescale-display-small-line-height: 2.75rem;
|
||||
--mdui-typescale-display-large-size: 3.5625rem;
|
||||
--mdui-typescale-display-medium-size: 2.8125rem;
|
||||
--mdui-typescale-display-small-size: 2.25rem;
|
||||
--mdui-typescale-display-large-tracking: 0rem;
|
||||
--mdui-typescale-display-medium-tracking: 0rem;
|
||||
--mdui-typescale-display-small-tracking: 0rem;
|
||||
--mdui-typescale-headline-large-weight: 400;
|
||||
--mdui-typescale-headline-medium-weight: 400;
|
||||
--mdui-typescale-headline-small-weight: 400;
|
||||
--mdui-typescale-headline-large-line-height: 2.5rem;
|
||||
--mdui-typescale-headline-medium-line-height: 2.25rem;
|
||||
--mdui-typescale-headline-small-line-height: 2rem;
|
||||
--mdui-typescale-headline-large-size: 2rem;
|
||||
--mdui-typescale-headline-medium-size: 1.75rem;
|
||||
--mdui-typescale-headline-small-size: 1.5rem;
|
||||
--mdui-typescale-headline-large-tracking: 0rem;
|
||||
--mdui-typescale-headline-medium-tracking: 0rem;
|
||||
--mdui-typescale-headline-small-tracking: 0rem;
|
||||
--mdui-typescale-title-large-weight: 400;
|
||||
--mdui-typescale-title-medium-weight: 500;
|
||||
--mdui-typescale-title-small-weight: 500;
|
||||
--mdui-typescale-title-large-line-height: 1.75rem;
|
||||
--mdui-typescale-title-medium-line-height: 1.5rem;
|
||||
--mdui-typescale-title-small-line-height: 1.25rem;
|
||||
--mdui-typescale-title-large-size: 1.375rem;
|
||||
--mdui-typescale-title-medium-size: 1rem;
|
||||
--mdui-typescale-title-small-size: 0.875rem;
|
||||
--mdui-typescale-title-large-tracking: 0rem;
|
||||
--mdui-typescale-title-medium-tracking: 0.009375rem;
|
||||
--mdui-typescale-title-small-tracking: 0.00625rem;
|
||||
--mdui-typescale-label-large-weight: 500;
|
||||
--mdui-typescale-label-medium-weight: 500;
|
||||
--mdui-typescale-label-small-weight: 500;
|
||||
--mdui-typescale-label-large-line-height: 1.25rem;
|
||||
--mdui-typescale-label-medium-line-height: 1rem;
|
||||
--mdui-typescale-label-small-line-height: 0.375rem;
|
||||
--mdui-typescale-label-large-size: 0.875rem;
|
||||
--mdui-typescale-label-medium-size: 0.75rem;
|
||||
--mdui-typescale-label-small-size: 0.6875rem;
|
||||
--mdui-typescale-label-large-tracking: 0.00625rem;
|
||||
--mdui-typescale-label-medium-tracking: 0.03125rem;
|
||||
--mdui-typescale-label-small-tracking: 0.03125rem;
|
||||
--mdui-typescale-body-large-weight: 400;
|
||||
--mdui-typescale-body-medium-weight: 400;
|
||||
--mdui-typescale-body-small-weight: 400;
|
||||
--mdui-typescale-body-large-line-height: 1.5rem;
|
||||
--mdui-typescale-body-medium-line-height: 1.25rem;
|
||||
--mdui-typescale-body-small-line-height: 1rem;
|
||||
--mdui-typescale-body-large-size: 1rem;
|
||||
--mdui-typescale-body-medium-size: 0.875rem;
|
||||
--mdui-typescale-body-small-size: 0.75rem;
|
||||
--mdui-typescale-body-large-tracking: 0.009375rem;
|
||||
--mdui-typescale-body-medium-tracking: 0.015625rem;
|
||||
--mdui-typescale-body-small-tracking: 0.025rem;
|
||||
}
|
||||
.mdui-lock-screen {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@ -57,7 +57,8 @@
|
||||
"@malept/flatpak-bundler@0.4.0": "patches/@malept__flatpak-bundler@0.4.0.patch",
|
||||
"kuromoji@0.1.2": "patches/kuromoji@0.1.2.patch",
|
||||
"file-type@16.5.4": "patches/file-type@16.5.4.patch",
|
||||
"electron-is@3.0.0": "patches/electron-is@3.0.0.patch"
|
||||
"electron-is@3.0.0": "patches/electron-is@3.0.0.patch",
|
||||
"mdui@2.1.4": "patches/mdui@2.1.4.patch"
|
||||
},
|
||||
"neverBuiltDependencies": []
|
||||
},
|
||||
@ -80,6 +81,7 @@
|
||||
"@jellybrick/electron-better-web-request": "1.0.4",
|
||||
"@jellybrick/mpris-service": "2.1.5",
|
||||
"@jimp/plugin-color": "1.6.0",
|
||||
"@mdui/icons": "^1.0.3",
|
||||
"@skyra/jaro-winkler": "1.1.1",
|
||||
"@xhayper/discord-rpc": "1.3.0",
|
||||
"async-mutex": "0.5.0",
|
||||
@ -115,6 +117,7 @@
|
||||
"kuroshiro": "1.2.0",
|
||||
"kuroshiro-analyzer-kuromoji": "1.1.0",
|
||||
"lazy-var": "2.2.2",
|
||||
"mdui": "2.1.4",
|
||||
"node-html-parser": "7.0.1",
|
||||
"node-id3": "0.2.9",
|
||||
"peerjs": "1.5.5",
|
||||
|
||||
40
patches/mdui@2.1.4.patch
Normal file
40
patches/mdui@2.1.4.patch
Normal file
@ -0,0 +1,40 @@
|
||||
diff --git a/jsx.en.d.ts b/jsx.en.d.ts
|
||||
index 514d455dcdb436aaf7b2ee88deaefe01943c8b4b..48dff045dead4315936afd931336198996c88217 100644
|
||||
--- a/jsx.en.d.ts
|
||||
+++ b/jsx.en.d.ts
|
||||
@@ -1,12 +1,8 @@
|
||||
-import React from 'react';
|
||||
import { JQ } from '@mdui/jq';
|
||||
|
||||
-type HTMLElementProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
||||
+type HTMLElementProps = import("solid-js").JSX.HTMLAttributes<HTMLElement>;
|
||||
|
||||
-declare global {
|
||||
- namespace React {
|
||||
- namespace JSX {
|
||||
- interface IntrinsicElements {
|
||||
+export interface IntrinsicElements {
|
||||
/**
|
||||
* Avatar Component
|
||||
*
|
||||
@@ -3296,7 +3292,4 @@ declare global {
|
||||
*/
|
||||
'order'?: number;
|
||||
} & HTMLElementProps;
|
||||
- }
|
||||
- }
|
||||
- }
|
||||
}
|
||||
diff --git a/package.json b/package.json
|
||||
index 3fa3eeb471ce4c31d7ac1c9bcb2d6823947e91ca..c4b062020bf20b8db34ccfea500fa682a4af19a6 100644
|
||||
--- a/package.json
|
||||
+++ b/package.json
|
||||
@@ -60,5 +60,8 @@
|
||||
"tslib": "^2.8.1",
|
||||
"@mdui/shared": "^1.0.8",
|
||||
"@mdui/jq": "^3.0.3"
|
||||
+ },
|
||||
+ "peerDependencies": {
|
||||
+ "solid-js": "^1.9.7"
|
||||
}
|
||||
}
|
||||
118
pnpm-lock.yaml
generated
118
pnpm-lock.yaml
generated
@ -25,6 +25,9 @@ patchedDependencies:
|
||||
kuromoji@0.1.2:
|
||||
hash: 4a948f1ea45c61779fa371feb020253ccf7a24e1f7c6b2e250b3ce53d86216d4
|
||||
path: patches/kuromoji@0.1.2.patch
|
||||
mdui@2.1.4:
|
||||
hash: 008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9
|
||||
path: patches/mdui@2.1.4.patch
|
||||
vudio@2.1.1:
|
||||
hash: 0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d
|
||||
path: patches/vudio@2.1.1.patch
|
||||
@ -87,6 +90,9 @@ importers:
|
||||
'@jimp/plugin-color':
|
||||
specifier: 1.6.0
|
||||
version: 1.6.0
|
||||
'@mdui/icons':
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3
|
||||
'@skyra/jaro-winkler':
|
||||
specifier: 1.1.1
|
||||
version: 1.1.1
|
||||
@ -192,6 +198,9 @@ importers:
|
||||
lazy-var:
|
||||
specifier: 2.2.2
|
||||
version: 2.2.2
|
||||
mdui:
|
||||
specifier: 2.1.4
|
||||
version: 2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9)
|
||||
node-html-parser:
|
||||
specifier: 7.0.1
|
||||
version: 7.0.1
|
||||
@ -1011,6 +1020,15 @@ packages:
|
||||
'@jridgewell/trace-mapping@0.3.30':
|
||||
resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0':
|
||||
resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
|
||||
|
||||
'@lit/localize@0.12.2':
|
||||
resolution: {integrity: sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ==}
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
|
||||
|
||||
'@malept/cross-spawn-promise@2.0.0':
|
||||
resolution: {integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==}
|
||||
engines: {node: '>= 12.13.0'}
|
||||
@ -1019,6 +1037,18 @@ packages:
|
||||
resolution: {integrity: sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==}
|
||||
engines: {node: '>= 10.0.0'}
|
||||
|
||||
'@material/material-color-utilities@0.3.0':
|
||||
resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
|
||||
|
||||
'@mdui/icons@1.0.3':
|
||||
resolution: {integrity: sha512-Jq9juUqIJMBvIRSTr0qBKiqnlbY5pVUzUP20EHSN8dT7GcqN7bq0AL8MASL5DxKs09kgcERq+z5bHJOkz/VDlA==}
|
||||
|
||||
'@mdui/jq@3.0.3':
|
||||
resolution: {integrity: sha512-nI8QK9UPHhiIbECrC1aMdLXNxP6WgUtC9XwRPs/e56FtwduePyxPyloXmgU8VYw85i6TtYdgClHS9tW8JweNZA==}
|
||||
|
||||
'@mdui/shared@1.0.8':
|
||||
resolution: {integrity: sha512-YY863fjHBuk8KtiO4uLDm1YyIVdGrWv4xUxfv8jP32WqIQBkSTbV7HN8jnKXXIej0NFP7pU89yGr4GJYzVszPg==}
|
||||
|
||||
'@msgpack/msgpack@2.8.0':
|
||||
resolution: {integrity: sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==}
|
||||
engines: {node: '>= 10'}
|
||||
@ -1890,6 +1920,9 @@ packages:
|
||||
resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
classcat@5.0.5:
|
||||
resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
|
||||
|
||||
clean-stack@2.2.0:
|
||||
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
|
||||
engines: {node: '>=6'}
|
||||
@ -3085,6 +3118,9 @@ packages:
|
||||
resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
|
||||
is-promise@4.0.0:
|
||||
resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
|
||||
|
||||
is-regex@1.2.1:
|
||||
resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@ -3346,6 +3382,15 @@ packages:
|
||||
resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
|
||||
lit-element@4.2.1:
|
||||
resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
|
||||
|
||||
lit-html@3.3.1:
|
||||
resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
|
||||
|
||||
lit@3.3.1:
|
||||
resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
|
||||
|
||||
locate-path@6.0.0:
|
||||
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
|
||||
engines: {node: '>=10'}
|
||||
@ -3420,6 +3465,9 @@ packages:
|
||||
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
mdui@2.1.4:
|
||||
resolution: {integrity: sha512-QtK5xia5HXtVO7yH30QjwvvNruw5JdrJL1MEc1k6S/ZfsbHOj6BxxdYjrdv2HiN5ikkGqt5CIbZdFyq6shaZyw==}
|
||||
|
||||
meow@13.2.0:
|
||||
resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
|
||||
engines: {node: '>=18'}
|
||||
@ -4309,6 +4357,9 @@ packages:
|
||||
sprintf-js@1.1.3:
|
||||
resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
|
||||
|
||||
ssr-window@5.0.1:
|
||||
resolution: {integrity: sha512-WVXlhQsm54HC+FnJfEbccEgNF7mKXtnFUB8Xn7rx2dsWHOlBdqezdX88Vjh6pVGaa0ZvL+PoSu7rEcBuNmxt6g==}
|
||||
|
||||
ssri@12.0.0:
|
||||
resolution: {integrity: sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==}
|
||||
engines: {node: ^18.17.0 || >=20.5.0}
|
||||
@ -5606,6 +5657,16 @@ snapshots:
|
||||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0': {}
|
||||
|
||||
'@lit/localize@0.12.2':
|
||||
dependencies:
|
||||
lit: 3.3.1
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
|
||||
'@malept/cross-spawn-promise@2.0.0':
|
||||
dependencies:
|
||||
cross-spawn: 7.0.6
|
||||
@ -5619,6 +5680,27 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@material/material-color-utilities@0.3.0': {}
|
||||
|
||||
'@mdui/icons@1.0.3':
|
||||
dependencies:
|
||||
'@mdui/shared': 1.0.8
|
||||
lit: 3.3.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@mdui/jq@3.0.3':
|
||||
dependencies:
|
||||
ssr-window: 5.0.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@mdui/shared@1.0.8':
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.1.1
|
||||
'@mdui/jq': 3.0.3
|
||||
lit: 3.3.1
|
||||
ssr-window: 5.0.1
|
||||
tslib: 2.8.1
|
||||
|
||||
'@msgpack/msgpack@2.8.0': {}
|
||||
|
||||
'@napi-rs/wasm-runtime@0.2.12':
|
||||
@ -6576,6 +6658,8 @@ snapshots:
|
||||
|
||||
ci-info@3.9.0: {}
|
||||
|
||||
classcat@5.0.5: {}
|
||||
|
||||
clean-stack@2.2.0: {}
|
||||
|
||||
clean-stack@5.2.0:
|
||||
@ -8009,6 +8093,8 @@ snapshots:
|
||||
|
||||
is-port-reachable@4.0.0: {}
|
||||
|
||||
is-promise@4.0.0: {}
|
||||
|
||||
is-regex@1.2.1:
|
||||
dependencies:
|
||||
call-bound: 1.0.4
|
||||
@ -8262,6 +8348,22 @@ snapshots:
|
||||
lightningcss-win32-arm64-msvc: 1.30.1
|
||||
lightningcss-win32-x64-msvc: 1.30.1
|
||||
|
||||
lit-element@4.2.1:
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
'@lit/reactive-element': 2.1.1
|
||||
lit-html: 3.3.1
|
||||
|
||||
lit-html@3.3.1:
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.7
|
||||
|
||||
lit@3.3.1:
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.1.1
|
||||
lit-element: 4.2.1
|
||||
lit-html: 3.3.1
|
||||
|
||||
locate-path@6.0.0:
|
||||
dependencies:
|
||||
p-locate: 5.0.0
|
||||
@ -8352,6 +8454,20 @@ snapshots:
|
||||
|
||||
math-intrinsics@1.1.0: {}
|
||||
|
||||
mdui@2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9):
|
||||
dependencies:
|
||||
'@floating-ui/utils': 0.2.10
|
||||
'@lit/localize': 0.12.2
|
||||
'@lit/reactive-element': 2.1.1
|
||||
'@material/material-color-utilities': 0.3.0
|
||||
'@mdui/jq': 3.0.3
|
||||
'@mdui/shared': 1.0.8
|
||||
classcat: 5.0.5
|
||||
is-promise: 4.0.0
|
||||
lit: 3.3.1
|
||||
ssr-window: 5.0.1
|
||||
tslib: 2.8.1
|
||||
|
||||
meow@13.2.0: {}
|
||||
|
||||
merge-anything@5.1.7:
|
||||
@ -9232,6 +9348,8 @@ snapshots:
|
||||
sprintf-js@1.1.3:
|
||||
optional: true
|
||||
|
||||
ssr-window@5.0.1: {}
|
||||
|
||||
ssri@12.0.0:
|
||||
dependencies:
|
||||
minipass: 7.1.2
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
export interface BackButtonProps {
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const BackButton = (props: BackButtonProps) => (
|
||||
<div
|
||||
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
|
||||
onClick={(e) => props.onClick?.(e)}
|
||||
role="tab"
|
||||
tab-id="FEmusic_back"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class="search-icon style-scope ytmusic-search-box"
|
||||
role="button"
|
||||
tabindex={0}
|
||||
title={props.title}
|
||||
>
|
||||
<div
|
||||
class="tab-icon style-scope paper-icon-button navigation-icon"
|
||||
id="icon"
|
||||
>
|
||||
<svg
|
||||
class="style-scope iron-icon"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style={{
|
||||
'pointer-events': 'none',
|
||||
'display': 'block',
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
}}
|
||||
viewBox="0 0 492 492"
|
||||
>
|
||||
<g class="style-scope iron-icon">
|
||||
<path d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,46 +0,0 @@
|
||||
export interface ForwardButtonProps {
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const ForwardButton = (props: ForwardButtonProps) => (
|
||||
<div
|
||||
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
|
||||
onClick={(e) => props.onClick?.(e)}
|
||||
role="tab"
|
||||
tab-id="FEmusic_next"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
class="search-icon style-scope ytmusic-search-box"
|
||||
role="button"
|
||||
tabindex={0}
|
||||
title={props.title}
|
||||
>
|
||||
<div
|
||||
class="tab-icon style-scope paper-icon-button navigation-icon"
|
||||
id="icon"
|
||||
>
|
||||
<svg
|
||||
class="style-scope iron-icon"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
style={{
|
||||
'pointer-events': 'none',
|
||||
'display': 'block',
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
}}
|
||||
viewBox="0 0 492 492"
|
||||
>
|
||||
<g class="style-scope iron-icon">
|
||||
<path
|
||||
d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
|
||||
l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
|
||||
c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -5,8 +5,8 @@ import { createPlugin } from '@/utils';
|
||||
|
||||
import { t } from '@/i18n';
|
||||
|
||||
import { ForwardButton } from './components/forward-button';
|
||||
import { BackButton } from './components/back-button';
|
||||
import '@mdui/icons/chevron-left.js';
|
||||
import '@mdui/icons/chevron-right.js';
|
||||
|
||||
export default createPlugin({
|
||||
name: () => t('plugins.navigation.name'),
|
||||
@ -15,7 +15,6 @@ export default createPlugin({
|
||||
config: {
|
||||
enabled: true,
|
||||
},
|
||||
stylesheets: [style],
|
||||
renderer: {
|
||||
buttonContainer: document.createElement('div'),
|
||||
start() {
|
||||
@ -26,14 +25,24 @@ export default createPlugin({
|
||||
render(
|
||||
() => (
|
||||
<>
|
||||
<BackButton
|
||||
onClick={() => history.back()}
|
||||
title={t('plugins.navigation.templates.back.title')}
|
||||
/>
|
||||
<ForwardButton
|
||||
onClick={() => history.forward()}
|
||||
title={t('plugins.navigation.templates.forward.title')}
|
||||
/>
|
||||
<mdui-tooltip
|
||||
content={t('plugins.navigation.templates.back.title')}
|
||||
>
|
||||
<mdui-button-icon onClick={() => history.back()}>
|
||||
<mdui-icon-chevron-left
|
||||
style={{ padding: '5px', scale: '1.5' }}
|
||||
/>
|
||||
</mdui-button-icon>
|
||||
</mdui-tooltip>
|
||||
<mdui-tooltip
|
||||
content={t('plugins.navigation.templates.forward.title')}
|
||||
>
|
||||
<mdui-button-icon onClick={() => history.forward()}>
|
||||
<mdui-icon-chevron-right
|
||||
style={{ padding: '5px', scale: '1.5' }}
|
||||
/>
|
||||
</mdui-button-icon>
|
||||
</mdui-tooltip>
|
||||
</>
|
||||
),
|
||||
this.buttonContainer,
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
.navigation-item {
|
||||
font-family:
|
||||
Roboto,
|
||||
Noto Naskh Arabic UI,
|
||||
Arial,
|
||||
sans-serif;
|
||||
font-size: 20px;
|
||||
line-height: var(--ytmusic-title-1_-_line-height);
|
||||
font-weight: 500;
|
||||
--yt-endpoint-color: #fff;
|
||||
--yt-endpoint-hover-color: #fff;
|
||||
--yt-endpoint-visited-color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
margin: 0 var(--ytd-margin-2x, 8px);
|
||||
}
|
||||
|
||||
.navigation-item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navigation-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
fill: var(--iron-icon-fill-color, currentcolor);
|
||||
stroke: none;
|
||||
width: var(--iron-icon-width, 24px);
|
||||
height: var(--iron-icon-height, 24px);
|
||||
animation: var(--iron-icon_-_animation);
|
||||
padding: var(--ytd-margin-base, 4px) var(--ytd-margin-2x, 8px);
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
/* eslint-disable stylistic/no-mixed-operators */
|
||||
import {
|
||||
createEffect,
|
||||
createMemo,
|
||||
@ -8,6 +9,7 @@ import {
|
||||
onCleanup,
|
||||
onMount,
|
||||
type Setter,
|
||||
Show,
|
||||
Switch,
|
||||
} from 'solid-js';
|
||||
|
||||
@ -15,6 +17,7 @@ import * as z from 'zod';
|
||||
|
||||
import {
|
||||
type ProviderName,
|
||||
ProviderNames,
|
||||
providerNames,
|
||||
ProviderNameSchema,
|
||||
type ProviderState,
|
||||
@ -23,7 +26,14 @@ import { currentLyrics, lyricsStore, setLyricsStore } from '../store';
|
||||
import { _ytAPI } from '../index';
|
||||
import { config } from '../renderer';
|
||||
|
||||
import type { YtIcons } from '@/types/icons';
|
||||
import '@mdui/icons/chevron-left.js';
|
||||
import '@mdui/icons/chevron-right.js';
|
||||
import '@mdui/icons/check-circle.js';
|
||||
import '@mdui/icons/warning.js';
|
||||
import '@mdui/icons/error.js';
|
||||
import '@mdui/icons/star.js';
|
||||
import '@mdui/icons/star-border.js';
|
||||
|
||||
import type { PlayerAPIEvents } from '@/types/player-api-events';
|
||||
|
||||
const LocalStorageSchema = z.object({
|
||||
@ -47,7 +57,8 @@ const shouldSwitchProvider = (providerData: ProviderState) => {
|
||||
const providerBias = (p: ProviderName) =>
|
||||
(lyricsStore.lyrics[p].state === 'done' ? 1 : -1) +
|
||||
(lyricsStore.lyrics[p].data?.lines?.length ? 2 : -1) +
|
||||
(lyricsStore.lyrics[p].data?.lines?.length && p === 'YTMusic' ? 1 : 0) +
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
(lyricsStore.lyrics[p].data?.lines?.length && p === ProviderNames.YTMusic ? 1 : 0) +
|
||||
(lyricsStore.lyrics[p].data?.lyrics ? 1 : -1);
|
||||
|
||||
const pickBestProvider = () => {
|
||||
@ -60,7 +71,6 @@ const pickBestProvider = () => {
|
||||
}
|
||||
|
||||
const providers = Array.from(providerNames);
|
||||
|
||||
providers.sort((a, b) => providerBias(b) - providerBias(a));
|
||||
|
||||
return { provider: providers[0], force: false };
|
||||
@ -175,50 +185,16 @@ export const LyricsPicker = (props: {
|
||||
});
|
||||
};
|
||||
|
||||
const chevronLeft: YtIcons = 'yt-icons:chevron_left';
|
||||
const chevronRight: YtIcons = 'yt-icons:chevron_right';
|
||||
|
||||
const successIcon: YtIcons = 'yt-icons:check-circle';
|
||||
const errorIcon: YtIcons = 'yt-icons:error';
|
||||
const notFoundIcon: YtIcons = 'yt-icons:warning';
|
||||
|
||||
return (
|
||||
<div class="lyrics-picker" ref={props.setStickRef}>
|
||||
<div class="lyrics-picker-left">
|
||||
<yt-icon-button
|
||||
class="style-scope ytmusic-player-bar"
|
||||
icon={chevronLeft}
|
||||
onClick={previous}
|
||||
role={'button'}
|
||||
>
|
||||
<span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
|
||||
<div
|
||||
style={{
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'display': 'flex',
|
||||
'align-items': 'center',
|
||||
'fill': 'currentcolor',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
class="style-scope yt-icon"
|
||||
fill="#FFFFFF"
|
||||
height={'40px'}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 -960 960 960"
|
||||
width={'40px'}
|
||||
>
|
||||
<g class="style-scope yt-icon">
|
||||
<path
|
||||
class="style-scope yt-icon"
|
||||
d="M560.67-240 320-480.67l240.67-240.66L608-674 414.67-480.67 608-287.33 560.67-240Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</yt-icon-button>
|
||||
<mdui-button-icon>
|
||||
<mdui-icon-chevron-left
|
||||
onClick={previous}
|
||||
role="button"
|
||||
style={{ padding: '5px' }}
|
||||
/>
|
||||
</mdui-button-icon>
|
||||
</div>
|
||||
|
||||
<div class="lyrics-picker-content">
|
||||
@ -247,9 +223,8 @@ export const LyricsPicker = (props: {
|
||||
/>
|
||||
</Match>
|
||||
<Match when={currentLyrics().state === 'error'}>
|
||||
<yt-icon
|
||||
icon={errorIcon}
|
||||
style={{ padding: '5px', transform: 'scale(0.8)' }}
|
||||
<mdui-icon-error
|
||||
style={{ padding: '5px', scale: '0.8' }}
|
||||
tabindex="-1"
|
||||
/>
|
||||
</Match>
|
||||
@ -260,9 +235,8 @@ export const LyricsPicker = (props: {
|
||||
currentLyrics().data?.lyrics)
|
||||
}
|
||||
>
|
||||
<yt-icon
|
||||
icon={successIcon}
|
||||
style={{ padding: '5px', transform: 'scale(0.8)' }}
|
||||
<mdui-icon-check-circle
|
||||
style={{ padding: '5px', scale: '0.8' }}
|
||||
tabindex="-1"
|
||||
/>
|
||||
</Match>
|
||||
@ -273,9 +247,8 @@ export const LyricsPicker = (props: {
|
||||
!currentLyrics().data?.lyrics
|
||||
}
|
||||
>
|
||||
<yt-icon
|
||||
icon={notFoundIcon}
|
||||
style={{ padding: '5px', transform: 'scale(0.8)' }}
|
||||
<mdui-icon-warning
|
||||
style={{ padding: '5px', scale: '0.8' }}
|
||||
tabindex="-1"
|
||||
/>
|
||||
</Match>
|
||||
@ -284,20 +257,14 @@ export const LyricsPicker = (props: {
|
||||
class="description ytmusic-description-shelf-renderer"
|
||||
text={{ runs: [{ text: provider() }] }}
|
||||
/>
|
||||
<yt-icon
|
||||
icon={
|
||||
starredProvider() === provider()
|
||||
? 'yt-sys-icons:star-filled'
|
||||
: 'yt-sys-icons:star'
|
||||
}
|
||||
onClick={toggleStar}
|
||||
style={{
|
||||
padding: '5px',
|
||||
transform: 'scale(0.8)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
tabindex="-1"
|
||||
/>
|
||||
<mdui-button-icon onClick={toggleStar} tabindex={-1}>
|
||||
<Show
|
||||
fallback={<mdui-icon-star-border />}
|
||||
when={starredProvider() === provider()}
|
||||
>
|
||||
<mdui-icon-star />
|
||||
</Show>
|
||||
</mdui-button-icon>
|
||||
</div>
|
||||
)}
|
||||
</Index>
|
||||
@ -318,41 +285,14 @@ export const LyricsPicker = (props: {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="lyrics-picker-right">
|
||||
<yt-icon-button
|
||||
class="style-scope ytmusic-player-bar"
|
||||
icon={chevronRight}
|
||||
onClick={next}
|
||||
role={'button'}
|
||||
>
|
||||
<span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
|
||||
<div
|
||||
style={{
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'display': 'flex',
|
||||
'align-items': 'center',
|
||||
'fill': 'currentcolor',
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
class="style-scope yt-icon"
|
||||
fill="#FFFFFF"
|
||||
height={'40px'}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 -960 960 960"
|
||||
width={'40px'}
|
||||
>
|
||||
<g class="style-scope yt-icon">
|
||||
<path
|
||||
class="style-scope yt-icon"
|
||||
d="M521.33-480.67 328-674l47.33-47.33L616-480.67 375.33-240 328-287.33l193.33-193.34Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</yt-icon-button>
|
||||
<div class="lyrics-picker-left">
|
||||
<mdui-button-icon>
|
||||
<mdui-icon-chevron-right
|
||||
onClick={next}
|
||||
role="button"
|
||||
style={{ padding: '5px' }}
|
||||
/>
|
||||
</mdui-button-icon>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -8,6 +8,40 @@ import is from 'electron-is';
|
||||
|
||||
import * as config from './config';
|
||||
|
||||
import mduiStyleSheet from '@assets/mdui.css?inline';
|
||||
|
||||
contextBridge.exposeInMainWorld(
|
||||
'litIssuedWarnings',
|
||||
new Set([
|
||||
'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',
|
||||
'Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded. See https://lit.dev/msg/polyfill-support-missing for more information.',
|
||||
]),
|
||||
);
|
||||
|
||||
new MutationObserver((mutations, observer) => {
|
||||
outer: for (const mutation of mutations) {
|
||||
for (const node of mutation.addedNodes) {
|
||||
const elem = node as HTMLElement;
|
||||
if (elem.tagName !== 'SCRIPT') continue;
|
||||
|
||||
const script = elem as HTMLScriptElement;
|
||||
if (
|
||||
!script.getAttribute('src')?.endsWith('custom-elements-es5-adapter.js')
|
||||
)
|
||||
continue;
|
||||
|
||||
script.remove();
|
||||
|
||||
const styleSheet = new CSSStyleSheet();
|
||||
styleSheet.replaceSync(mduiStyleSheet);
|
||||
document.adoptedStyleSheets.push(styleSheet);
|
||||
|
||||
observer.disconnect();
|
||||
break outer;
|
||||
}
|
||||
}
|
||||
}).observe(document, { subtree: true, childList: true });
|
||||
|
||||
import {
|
||||
forceLoadPreloadPlugin,
|
||||
forceUnloadPreloadPlugin,
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
import i18next from 'i18next';
|
||||
|
||||
import { setTheme } from 'mdui/functions/setTheme.js';
|
||||
import 'mdui/mdui.css';
|
||||
import 'mdui';
|
||||
|
||||
import { startingPages } from './providers/extracted-data';
|
||||
import { setupSongInfo } from './providers/song-info-front';
|
||||
import {
|
||||
@ -25,6 +29,8 @@ import type { QueueResponse } from '@/types/youtube-music-desktop-internal';
|
||||
import type { YouTubeMusicAppElement } from '@/types/youtube-music-app-element';
|
||||
import type { SearchBoxElement } from '@/types/search-box-element';
|
||||
|
||||
setTheme('dark');
|
||||
|
||||
let api: (Element & YoutubePlayer) | null = null;
|
||||
let isPluginLoaded = false;
|
||||
let isApiLoaded = false;
|
||||
@ -388,10 +394,14 @@ async function onApiLoaded() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
ytmusic-player-bar[is-mweb-player-bar-modernization-enabled] .middle-controls-buttons.ytmusic-player-bar, #like-button-renderer {
|
||||
display: ${likeButtonsOptions === 'hide' ? 'none' : 'inherit'} !important;
|
||||
display: ${
|
||||
likeButtonsOptions === 'hide' ? 'none' : 'inherit'
|
||||
} !important;
|
||||
}
|
||||
ytmusic-player-bar[is-mweb-player-bar-modernization-enabled] .middle-controls.ytmusic-player-bar {
|
||||
justify-content: ${likeButtonsOptions === 'hide' ? 'flex-start' : 'space-between'} !important;
|
||||
justify-content: ${
|
||||
likeButtonsOptions === 'hide' ? 'flex-start' : 'space-between'
|
||||
} !important;
|
||||
}`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
@ -86,4 +86,4 @@ tp-yt-paper-item.ytmusic-guide-entry-renderer::before {
|
||||
tp-yt-iron-dropdown,
|
||||
tp-yt-paper-dialog {
|
||||
app-region: no-drag;
|
||||
}
|
||||
}
|
||||
|
||||
13
src/yt-web-components.d.ts
vendored
13
src/yt-web-components.d.ts
vendored
@ -1,3 +1,5 @@
|
||||
import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en';
|
||||
|
||||
import type { Icons } from '@/types/icons';
|
||||
import type { ComponentProps } from 'solid-js';
|
||||
|
||||
@ -37,7 +39,16 @@ declare module 'solid-js' {
|
||||
key?: string;
|
||||
}
|
||||
|
||||
interface IntrinsicElements {
|
||||
type MduiIcons = Extract<
|
||||
keyof HTMLElementTagNameMap,
|
||||
`mdui-icon-${string}`
|
||||
>;
|
||||
|
||||
type MduiIconElements = {
|
||||
[k in MduiIcons]: ComponentProps<'div'>;
|
||||
};
|
||||
|
||||
interface IntrinsicElements extends MDUIElements, MduiIconElements {
|
||||
'center': ComponentProps<'div'>;
|
||||
'ytmd-trans': ComponentProps<'span'> & YtmdTransProps;
|
||||
'yt-formatted-string': ComponentProps<'span'> & YtFormattedStringProps;
|
||||
|
||||
Reference in New Issue
Block a user