summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
Diffstat (limited to 'css')
-rw-r--r--css/fonts.css216
-rw-r--r--css/frame-about.css52
-rw-r--r--css/frame-home.css51
-rw-r--r--css/frame-library.css209
-rw-r--r--css/frame-lyrics.css49
-rw-r--r--css/frame-settings.css15
-rw-r--r--css/frame.css27
-rw-r--r--css/general.css11
-rw-r--r--css/header.css20
-rw-r--r--css/loader.css36
-rw-r--r--css/navigation.css56
-rw-r--r--css/player.css94
-rw-r--r--css/seekbar.css34
13 files changed, 870 insertions, 0 deletions
diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644
index 0000000..2424ed4
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,216 @@
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-MediumItalic.eot');
+ src: url('/fonts/Poppins-MediumItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-MediumItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-MediumItalic.woff') format('woff'),
+ url('/fonts/Poppins-MediumItalic.ttf') format('truetype');
+ font-weight: 500;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Light.eot');
+ src: url('/fonts/Poppins-Light.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Light.woff2') format('woff2'),
+ url('/fonts/Poppins-Light.woff') format('woff'),
+ url('/fonts/Poppins-Light.ttf') format('truetype');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-LightItalic.eot');
+ src: url('/fonts/Poppins-LightItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-LightItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-LightItalic.woff') format('woff'),
+ url('/fonts/Poppins-LightItalic.ttf') format('truetype');
+ font-weight: 300;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Bold.eot');
+ src: url('/fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Bold.woff2') format('woff2'),
+ url('/fonts/Poppins-Bold.woff') format('woff'),
+ url('/fonts/Poppins-Bold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Italic.eot');
+ src: url('/fonts/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Italic.woff2') format('woff2'),
+ url('/fonts/Poppins-Italic.woff') format('woff'),
+ url('/fonts/Poppins-Italic.ttf') format('truetype');
+ font-weight: normal;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-ExtraBold.eot');
+ src: url('/fonts/Poppins-ExtraBold.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-ExtraBold.woff2') format('woff2'),
+ url('/fonts/Poppins-ExtraBold.woff') format('woff'),
+ url('/fonts/Poppins-ExtraBold.ttf') format('truetype');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Regular.eot');
+ src: url('/fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Regular.woff2') format('woff2'),
+ url('/fonts/Poppins-Regular.woff') format('woff'),
+ url('/fonts/Poppins-Regular.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-ThinItalic.eot');
+ src: url('/fonts/Poppins-ThinItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-ThinItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-ThinItalic.woff') format('woff'),
+ url('/fonts/Poppins-ThinItalic.ttf') format('truetype');
+ font-weight: 100;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Medium.eot');
+ src: url('/fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Medium.woff2') format('woff2'),
+ url('/fonts/Poppins-Medium.woff') format('woff'),
+ url('/fonts/Poppins-Medium.ttf') format('truetype');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-ExtraLightItalic.eot');
+ src: url('/fonts/Poppins-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-ExtraLightItalic.woff') format('woff'),
+ url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
+ font-weight: 200;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-SemiBold.eot');
+ src: url('/fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-SemiBold.woff2') format('woff2'),
+ url('/fonts/Poppins-SemiBold.woff') format('woff'),
+ url('/fonts/Poppins-SemiBold.ttf') format('truetype');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Black.eot');
+ src: url('/fonts/Poppins-Black.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Black.woff2') format('woff2'),
+ url('/fonts/Poppins-Black.woff') format('woff'),
+ url('/fonts/Poppins-Black.ttf') format('truetype');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-BlackItalic.eot');
+ src: url('/fonts/Poppins-BlackItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-BlackItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-BlackItalic.woff') format('woff'),
+ url('/fonts/Poppins-BlackItalic.ttf') format('truetype');
+ font-weight: 900;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-ExtraBoldItalic.eot');
+ src: url('/fonts/Poppins-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-ExtraBoldItalic.woff') format('woff'),
+ url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-SemiBoldItalic.eot');
+ src: url('/fonts/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-SemiBoldItalic.woff') format('woff'),
+ url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
+ font-weight: 600;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-Thin.eot');
+ src: url('/fonts/Poppins-Thin.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-Thin.woff2') format('woff2'),
+ url('/fonts/Poppins-Thin.woff') format('woff'),
+ url('/fonts/Poppins-Thin.ttf') format('truetype');
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-ExtraLight.eot');
+ src: url('/fonts/Poppins-ExtraLight.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-ExtraLight.woff2') format('woff2'),
+ url('/fonts/Poppins-ExtraLight.woff') format('woff'),
+ url('/fonts/Poppins-ExtraLight.ttf') format('truetype');
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins-BoldItalic.eot');
+ src: url('/fonts/Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
+ url('/fonts/Poppins-BoldItalic.woff2') format('woff2'),
+ url('/fonts/Poppins-BoldItalic.woff') format('woff'),
+ url('/fonts/Poppins-BoldItalic.ttf') format('truetype');
+ font-weight: bold;
+ font-style: italic;
+ font-display: swap;
+}
+
diff --git a/css/frame-about.css b/css/frame-about.css
new file mode 100644
index 0000000..9a2e804
--- /dev/null
+++ b/css/frame-about.css
@@ -0,0 +1,52 @@
+#frame-about-general {
+ display: grid;
+ grid-template-columns: 64px 1fr;
+}
+
+#frame-about-general-icon {
+ width: 64px;
+}
+
+#frame-contents {
+ padding: 10px;
+}
+
+#frame-about-general-text {
+ display: flex;
+ align-items: center;
+ margin-left: 10px;
+}
+
+#frame-about-debug {
+ width: 100%;
+ font-size: 12px;
+ margin-top: 10px;
+}
+
+.frame-about-section * {
+ max-width: 50vw;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.frame-about-section {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ grid-column-gap: 5px;
+ margin-left: 15px;
+ margin-bottom: 10px;
+}
+
+.frame-about-link {
+ color: #0000c8;
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.frame-about-link:hover {
+ text-decoration: none;
+}
+
+.frame-about-link:active {
+ opacity: .5;
+} \ No newline at end of file
diff --git a/css/frame-home.css b/css/frame-home.css
new file mode 100644
index 0000000..82f171a
--- /dev/null
+++ b/css/frame-home.css
@@ -0,0 +1,51 @@
+#frame-home-intro {
+ margin-top: 40px;
+ text-align: center;
+ padding: 0 10px;
+}
+
+#frame-home-logo {
+ width: 128px;
+}
+
+#frame-home-welcome {
+ font-size: 30px;
+}
+
+#frame-home-tagline {
+ font-size: 18px;
+}
+
+#frame-home-button {
+ margin-top: 10px;
+ background: #002e47;
+ color: white;
+ border: 1px solid rgba(0, 0, 0, .25);
+ border-radius: 5px;
+ padding: 5px 10px;
+}
+
+#frame-home-button:hover {
+ background: #0e4665;
+}
+
+#frame-home-button:active, #frame-home-button:focus {
+ background: #1f648b;
+}
+
+#frame-home-links {
+ font-size: 12px;
+ margin-top: 10px;
+ opacity: .5;
+}
+
+.frame-home-link {
+ color: #0e4665;
+ cursor: pointer;
+ text-decoration: underline;
+ text-decoration-color: transparent;
+}
+
+.frame-home-link:hover {
+ text-decoration-color: inherit;
+} \ No newline at end of file
diff --git a/css/frame-library.css b/css/frame-library.css
new file mode 100644
index 0000000..9311796
--- /dev/null
+++ b/css/frame-library.css
@@ -0,0 +1,209 @@
+.frame-library-item {
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ padding: 20px;
+ cursor: default;
+}
+
+.frame-library-item:hover {
+ background: rgba(0, 0, 0, .05);
+}
+
+.frame-library-item:active, .frame-library-item:focus {
+ background: rgba(0, 0, 0, .1);
+}
+
+.frame-library-item-inner {
+ display: grid;
+ grid-template-columns: 128px 1fr;
+}
+
+.frame-library-item-cover-inner {
+ width: 128px;
+}
+
+.frame-library-item-text {
+ display: flex;
+ align-items: center;
+}
+
+.frame-library-item-text-inner {
+ padding-left: 16px;
+ width: calc(100% - 16px);
+}
+
+.frame-library-item-text-title {
+ font-weight: 600;
+ font-size: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 50vw;
+}
+
+.frame-library-item-set {
+ margin-left: 144px;
+}
+
+@media (max-width: 500px) {
+ .frame-library-item-set {
+ margin-left: 0 !important;
+ }
+}
+
+.frame-library-item-set-song {
+ padding: 5px;
+ border-top: 1px solid rgba(0, 0, 0, .1);
+ border-bottom: 1px solid rgba(0, 0, 0, .1);
+ border-collapse: collapse;
+ display: grid;
+ grid-template-columns: 32px 1fr;
+}
+
+.frame-library-item-set-song:hover {
+ background: rgba(0, 0, 0, .05);
+}
+
+.frame-library-item-set-song:active {
+ background: rgba(0, 0, 0, .1);
+}
+
+.frame-library-item-set-song-cover-inner {
+ width: 32px;
+ height: 32px;
+ background: rgba(0, 0, 0, .25);
+ vertical-align: middle;
+}
+
+.frame-library-item-set-song-title {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ overflow: hidden;
+ margin-left: 5px;
+ text-overflow: ellipsis;
+}
+
+#frame-viewer-header {
+ padding: 10px;
+ border-bottom: 1px solid rgba(0, 0, 0, .05);
+ background: rgba(200, 200, 200, 1);
+ backdrop-filter: blur(30px);
+ -webkit-backdrop-filter: blur(30px);
+}
+
+#frame-viewer-header-inner {
+ display: grid;
+ grid-template-columns: 128px 1fr;
+}
+
+#frame-viewer-header-cover-inner {
+ width: 128px;
+}
+
+#frame-viewer-header-text {
+ display: flex;
+ align-items: center;
+}
+
+#frame-viewer-header-text-inner {
+ margin-left: 15px;
+}
+
+#frame-viewer-header-text-title {
+ font-weight: 600;
+ font-size: 24px;
+}
+
+#frame-viewer-header-text-linkToSet, #frame-viewer-header-text-linkToOriginal {
+ cursor: pointer;
+ text-decoration: underline;
+ text-decoration-color: transparent;
+}
+
+#frame-viewer-header-text-linkToSet:hover, #frame-viewer-header-text-linkToOriginal:hover {
+ text-decoration-color: inherit;
+}
+
+#frame-viewer-header-text-linkToSet:active, #frame-viewer-header-text-linkToSet:focus, #frame-viewer-header-text-linkToOriginal:active, #frame-viewer-header-text-linkToOriginal:focus {
+ opacity: .75;
+}
+
+#frame-viewer-description {
+ padding: 10px;
+}
+
+#frame-viewer-header-play {
+ margin-top: 10px;
+ background: rgba(0, 0, 0, 0.25);
+ border: 1px solid rgba(0, 0, 0, .5);
+ border-radius: 5px;
+ padding: 5px 10px;
+ animation-fill-mode: both;
+ animation-duration: 2s;
+ animation-name: playbtn;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-direction: alternate-reverse;
+ color: white;
+}
+
+#frame-viewer-header-play:hover {
+ background: rgba(0, 0, 0, .5);
+ border-color: rgba(0, 0, 0, .75) !important;
+}
+
+#frame-viewer-header-play:active {
+ background: rgba(0, 0, 0, .75);
+ border-color: rgba(0, 0, 0, 1) !important;
+}
+
+@keyframes playbtn {
+ 0% { border-color: rgba(0, 0, 0, .5); }
+ 100% { border-color: rgba(175, 175, 175, .5); }
+}
+
+#frame-viewer-header-outer {
+ background-size: cover;
+ background-position: center;
+}
+
+#frame-viewer-set {
+ margin-left: 0;
+}
+
+.frame-library-item-set *:not(:nth-last-child(1)) {
+ border-bottom: none;
+}
+
+.frame-library-item-set-song-wip {
+ opacity: .3;
+ pointer-events: none;
+}
+
+.frame-library-wipBadge {
+ background: rgb(255, 190, 0);
+ border: 1px solid rgba(180, 146, 30, 0.5);
+ padding: 0px 5px;
+ border-radius: 999px;
+ margin-left: 5px;
+}
+
+#frame-viewer-header-notPlayable {
+ opacity: .5;
+ font-size: 12px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+#frame-viewer-header-notAvailableCount {
+ vertical-align: middle;
+ font-size: 12px;
+ color: #9f7700;
+ padding-left: 5px;
+}
+
+@media (max-width: 500px) {
+ #frame-viewer-header-notAvailableCount {
+ padding-left: 0;
+ display: block;
+ }
+} \ No newline at end of file
diff --git a/css/frame-lyrics.css b/css/frame-lyrics.css
new file mode 100644
index 0000000..0a5dec6
--- /dev/null
+++ b/css/frame-lyrics.css
@@ -0,0 +1,49 @@
+#frame-lyrics-loader, #frame-lyrics-none, #frame-lyrics-play {
+ display: flex;
+ position: fixed;
+ top: 45px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+#frame-lyrics-none-icon {
+ width: 48px;
+}
+
+#frame-lyrics-none-message {
+ margin: 0 10px;
+ font-size: 20px;
+}
+
+#frame-lyrics-none {
+ opacity: .5;
+}
+
+#frame-lyrics-play-icon {
+ width: 48px;
+}
+
+#frame-lyrics-play-message {
+ margin: 0 10px;
+ font-size: 20px;
+}
+
+#frame-lyrics-play {
+ opacity: .5;
+}
+
+#frame-lyrics-show {
+ padding: 10px;
+}
+
+#frame-lyrics-show * {
+ cursor: text;
+}
+
+#frame-lyrics-show-copyright {
+ opacity: .5;
+} \ No newline at end of file
diff --git a/css/frame-settings.css b/css/frame-settings.css
new file mode 100644
index 0000000..d004710
--- /dev/null
+++ b/css/frame-settings.css
@@ -0,0 +1,15 @@
+#frame-contents {
+ padding: 10px;
+}
+
+#frame-settings-quality-warning {
+ color: #9f7700;
+ font-size: 12px;
+ padding-top: 5px;
+}
+
+#frame-settings-quality-notImplemented {
+ color: #9f0000;
+ font-size: 12px;
+ padding-top: 5px;
+} \ No newline at end of file
diff --git a/css/frame.css b/css/frame.css
new file mode 100644
index 0000000..aa0904b
--- /dev/null
+++ b/css/frame.css
@@ -0,0 +1,27 @@
+#frame {
+ position: fixed;
+ left: 65px;
+ bottom: 57px;
+ right: 0;
+ top: 0;
+}
+
+#frame-inner {
+ border: 0;
+ width: 100%;
+ height: 100%;
+}
+
+#frame-contents {
+ margin-top: 45px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ overflow: auto;
+}
+
+#frame-header {
+ overflow: hidden;
+} \ No newline at end of file
diff --git a/css/general.css b/css/general.css
new file mode 100644
index 0000000..7c330c2
--- /dev/null
+++ b/css/general.css
@@ -0,0 +1,11 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ background: white;
+ color: black;
+}
+
+* {
+ font-family: "Poppins", -apple-system, "Segoe UI", "Ubuntu", sans-serif;
+ cursor: default;
+} \ No newline at end of file
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..7227fa1
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,20 @@
+#frame-header {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, .175);
+ background-color: rgba(0, 0, 0, .02);
+ transition: background-color 200ms;
+ overflow: auto;
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ height: 24px;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+#frame-header:hover {
+ background-color: rgba(0, 0, 0, .03);
+} \ No newline at end of file
diff --git a/css/loader.css b/css/loader.css
new file mode 100644
index 0000000..c0f2bce
--- /dev/null
+++ b/css/loader.css
@@ -0,0 +1,36 @@
+.loader-path {
+ fill: none;
+ stroke: black;
+ stroke-width: 3px;
+ stroke-linecap: round;
+ stroke-dasharray: 10, 10;
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.circular-loader {
+ animation: rotate 2s linear infinite;
+}
+
+@keyframes animate-stroke {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+ 50% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -35;
+ }
+ 100% {
+ stroke-dasharray: 89, 200;
+ stroke-dashoffset: -124;
+ }
+}
+
+.loader-path {
+ animation: animate-stroke 1.5s ease-in-out infinite;
+} \ No newline at end of file
diff --git a/css/navigation.css b/css/navigation.css
new file mode 100644
index 0000000..2be100e
--- /dev/null
+++ b/css/navigation.css
@@ -0,0 +1,56 @@
+#navigation-outer {
+ position: fixed;
+ top: 0;
+ bottom: 56px;
+ left: 0;
+ border-right: 1px solid rgba(0, 0, 0, .175);
+ background-color: rgba(0, 0, 0, .02);
+ transition: background-color 200ms;
+ width: calc(64px - 32px);
+ overflow: auto;
+ padding: 16px;
+ display: flex;
+ align-items: center;
+}
+
+#navigation {
+ width: 100%;
+}
+
+#navigation-outer:hover {
+ background-color: rgba(0, 0, 0, .03);
+}
+
+.navigation-item {
+ display: block;
+ text-align: center;
+ margin: 0 -16px;
+ padding: 12px;
+}
+
+.navigation-item:hover .navigation-item-icon {
+ opacity: .5;
+}
+
+.navigation-item:active .navigation-item-icon {
+ opacity: .25;
+}
+
+#navigation-about {
+ text-align: center;
+ padding-bottom: 12px;
+ margin: 0 -16px;
+ display: block;
+}
+
+#navigation-about-icon {
+ width: 32px;
+}
+
+#navigation-about:hover #navigation-about-icon {
+ opacity: .75;
+}
+
+#navigation-about:active #navigation-about-icon {
+ opacity: .5;
+} \ No newline at end of file
diff --git a/css/player.css b/css/player.css
new file mode 100644
index 0000000..08da44f
--- /dev/null
+++ b/css/player.css
@@ -0,0 +1,94 @@
+#player {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 56px;
+ width: 100%;
+ border-top: 1px solid rgba(0, 0, 0, .175);
+ background-color: rgba(0, 0, 0, .02);
+ transition: background-color 200ms;
+}
+
+#player:hover {
+ background-color: rgba(0, 0, 0, .03);
+}
+
+#player-inner {
+ text-align: center;
+ height: 100%;
+}
+
+#player-buttons, #player-info, #player-seekbar-area {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.player-button {
+ display: inline-block;
+ padding: 5px;
+ width: 24px;
+ height: 24px;
+}
+
+.player-button:hover .player-button-icon {
+ opacity: .75;
+}
+
+.player-button:active .player-button-icon {
+ opacity: .5;
+}
+
+#player-artwork {
+ width: 42px;
+ height: 42px;
+ margin-right: 8px;
+ background: rgb(208, 208, 208);
+}
+
+#player-info-text {
+ font-size: 14px;
+ text-align: left;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr 1fr;
+}
+
+#player-info-text-title {
+ font-weight: 600;
+}
+
+#player-info-text-title, #player-info-text-set, #player-info-text {
+ text-overflow: ellipsis;
+ width: 256px;
+ overflow: hidden;
+}
+
+#player-button-load-icon {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+}
+
+#player-seekbar {
+ width: 35vw;
+ margin: 0 10px;
+}
+
+#player-seekbar-elapsed, #player-seekbar-total {
+ font-size: 12px;
+ display: inline-block;
+ width: 48px;
+}
+
+#player-seekbar-total {
+ margin-right: 5px;
+}
+
+.player-button-disabled .player-button-icon {
+ opacity: .25 !important;
+} \ No newline at end of file
diff --git a/css/seekbar.css b/css/seekbar.css
new file mode 100644
index 0000000..67a3ec6
--- /dev/null
+++ b/css/seekbar.css
@@ -0,0 +1,34 @@
+#player-seekbar {
+ -webkit-appearance: none;
+ height: 2px;
+ border-radius: 999px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+}
+
+#player-seekbar::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #282828;
+}
+
+#player-seekbar::-moz-range-thumb {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ background: #282828;
+}
+
+#player-seekbar::-webkit-slider-thumb:hover {
+ background: rgba(40, 40, 40, 0.75);
+}
+
+#player-seekbar::-moz-range-thumb:hover {
+ background: rgba(40, 40, 40, 0.75);
+} \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.