diff --git a/asset-manifest.json b/asset-manifest.json
index 4e9134a..d1dfeb9 100644
--- a/asset-manifest.json
+++ b/asset-manifest.json
@@ -1,6 +1,6 @@
{
"files": {
- "main.css": "/ipod-CN/static/css/main.2493cc11.css",
+ "main.css": "/ipod-CN/static/css/main.cabd6157.css",
"main.js": "/ipod-CN/static/js/main.322ba87c.js",
"static/media/Post Malone - White Iverson.mp3": "/ipod-CN/static/media/Post Malone - White Iverson.0c63ed238dd2ca8574e2.mp3",
"static/media/Sigrid - High Five.mp3": "/ipod-CN/static/media/Sigrid - High Five.0e42a243a4923db61ce1.mp3",
@@ -19,11 +19,11 @@
"static/media/settings.png": "/ipod-CN/static/media/settings.9bc43f25a527271f7965.png",
"static/media/wallpaper2.jpg": "/ipod-CN/static/media/wallpaper2.f7623c91d1eafa558274.jpg",
"index.html": "/ipod-CN/index.html",
- "main.2493cc11.css.map": "/ipod-CN/static/css/main.2493cc11.css.map",
+ "main.cabd6157.css.map": "/ipod-CN/static/css/main.cabd6157.css.map",
"main.322ba87c.js.map": "/ipod-CN/static/js/main.322ba87c.js.map"
},
"entrypoints": [
- "static/css/main.2493cc11.css",
+ "static/css/main.cabd6157.css",
"static/js/main.322ba87c.js"
]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 859898c..d67c25e 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/ipod-CN/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/ipod-CN/logo192.png"/><link rel="manifest" href="/ipod-CN/manifest.json"/><title>React App</title><script defer="defer" src="/ipod-CN/static/js/main.322ba87c.js"></script><link href="/ipod-CN/static/css/main.2493cc11.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/ipod-CN/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/ipod-CN/logo192.png"/><link rel="manifest" href="/ipod-CN/manifest.json"/><title>React App</title><script defer="defer" src="/ipod-CN/static/js/main.322ba87c.js"></script><link href="/ipod-CN/static/css/main.cabd6157.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
\ No newline at end of file
diff --git a/static/css/main.2493cc11.css b/static/css/main.2493cc11.css
deleted file mode 100644
index e83e715..0000000
--- a/static/css/main.2493cc11.css
+++ /dev/null
@@ -1,2 +0,0 @@
-body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:gray;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:90vh;justify-content:center;margin:0;width:100vw}.lock-display{background-color:#fff;font-size:100px;height:150px;opacity:.3}.bottom-div-lock,.lock-display{align-items:center;display:flex;justify-content:center;width:270px}.bottom-div-lock{background-color:#e3f2fd;font-size:15px;height:40px}.case{-webkit-box-reflect:below 8px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(70%,transparent),to(hsla(0,0%,98%,.1)));align-items:center;background-color:#d2d2d2;border-radius:40px;box-shadow:inset 0 0 20px 3px #000;display:flex;flex-direction:column;height:500px;width:300px}.wheel-container{display:flex;margin-bottom:20px;margin-top:auto}.wheel,.wheel-container{height:200px;position:relative;width:200px}.wheel{background-color:#fff;border-radius:50%;cursor:pointer}.controll{color:#d2d2d2;font-weight:900;position:absolute}#menu{font-size:18px;font-weight:900;height:20px;left:38%;top:11%;width:40px}#reverse{left:10%}#forward,#reverse{font-size:23px;top:45%}#forward{right:10%}#play-pause{bottom:11%;height:20px;left:44%;width:40px}.blank{background-color:#d2d2d2;border-radius:50%;height:80px;left:31%;position:absolute;top:30%;width:80px}.bar{background-color:#e3f2fd;border-bottom:1px solid #000;display:flex;height:20px;margin-top:-1px;min-height:20px;width:270px}.heading{margin:1px 5px;padding:0}.time{margin:auto;padding:0}.battery{height:20px;width:22px}.right-container-nav{display:flex;flex-direction:row;margin-left:15px}.play-pause-nav{font-size:15px;margin:0 8px 0 0}.notification,.play-pause-nav{color:#039be5;padding:0;text-align:center}.notification{margin:auto}.menu-container{display:flex}.leaf,.menu{background-color:#e3f2fd;height:190px;width:135px}.leaf{border-left:1px solid #000}h3{margin:0;text-align:center}h3,ul{padding:0}ul{list-style:none;width:100%}li{padding:10px 0}.active{background-color:#3796dc;color:#fff;padding-left:5px;position:relative}.active:after{content:">";position:absolute;right:2px}.leaf-img{border:2px solid #000;height:188px;width:135px}.music{background-color:#e3f2fd;height:190px;width:270px}h3{margin:1px}.music #song1{padding:0}.settings{background-color:#e3f2fd;height:200px;width:270px}li{padding-left:5px}h2{margin:7px -5px -5px 6px}.now-playing-container{background-color:#e3f2fd;height:190px;width:270px}.song-details{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;padding:10px}.song-details img{height:110px;margin:10px auto auto;width:110px}.song-details h6{font-size:18px;margin:2px 2px 2px 5px}.status{align-items:center;display:flex;justify-content:center;margin-top:20px;width:100%}#progress{background-color:gray;height:10px;margin:0 5px;width:65%}#progress-bar{background-color:green;height:10px}.play-pause-nav{font-size:18px;margin-top:20px}.display{background-position:50%;background-size:cover;border:1.5px solid #000;flex-direction:column;height:210px;margin-top:25px;padding:3px}.blank-div,.display{display:flex;width:270px}.blank-div{align-items:center;background-color:#e3f2fd;height:200px;justify-content:center;text-align:center}.empty-text{margin:5px;text-align:center}.theme-li{padding:1px}.information-container{color:grey;height:-webkit-max-content;height:max-content;padding:10px 0;position:fixed;top:-542px;transition:all .3s ease-in-out;z-index:2}p{margin:2px}.info-div{border:2px solid #000;font-size:16px;line-height:20px;max-height:560px;max-width:300px;transition:all .3s ease-in-out}#info-btn,.info-div{background-color:#212121;box-sizing:border-box}#info-btn{border-radius:10px;color:#f0f5f9;cursor:pointer;font-size:15px;margin-left:90px;outline:none;padding:2px 10px;text-align:center}#info-btn:hover{background-color:#ff165d}
-/*# sourceMappingURL=main.2493cc11.css.map*/
\ No newline at end of file
diff --git a/static/css/main.2493cc11.css.map b/static/css/main.2493cc11.css.map
deleted file mode 100644
index cbe3bee..0000000
--- a/static/css/main.2493cc11.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"static/css/main.2493cc11.css","mappings":"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","sources":["css/index.css","css/App.css","css/Case.css","css/Wheel.css","css/Navbar.css","css/Menu.css","css/Music.css","css/Settings.css","css/Playing.css","css/Display.css","css/Themes.css","css/KnowMore.css"],"sourcesContent":["/* Body */\nbody {\n display: flex;\n width: 100vw;\n height: 90vh;\n background-color: gray;\n justify-content: center;\n align-items: center;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}","/* lock icon in lockscreen */\n.lock-display{\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0.3;\n width: 270px;\n height: 150px;\n background-color: white;\n font-size: 100px;\n}\n\n/* Bottom div lockscreen */\n.bottom-div-lock{\n width: 270px;\n height: 40px;\n background-color: #E3F2FD;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 15px;\n}\n\n\n","/* iPod case */\n.case{\n height: 500px;\n width: 300px;\n border-radius: 40px;\n background-color: rgb(210, 210, 210);\n display: flex;\n flex-direction: column;\n align-items: center;\n box-shadow: inset 0 0 20px 3px black;\n -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));\n}\n\n\n","/* wheel container div */\n.wheel-container{\n position: relative;\n width: 200px;\n height: 200px; \n margin-top: auto;\n margin-bottom: 20px;\n display: flex;\n}\n\n/* wheel with border radius 50% */\n.wheel{\n cursor: pointer;\n position: relative;\n width: 200px;\n height: 200px;\n background-color: white; \n border-radius: 50%;\n}\n\n/* all controls */\n.controll{\n color: rgb(210, 210, 210);\n font-weight: 900;\n position: absolute;\n}\n\n/* menu button */\n#menu{\n left: 38%;\n top: 11%;\n font-weight: 900;\n font-size: 18px;\n width: 40px;\n height: 20px;\n}\n\n/* reverse button */\n#reverse{\n left: 10%;\n top: 45%;\n font-size: 23px;\n}\n\n/* forward button */\n#forward{\n right: 10%;\n top: 45%;\n font-size: 23px;\n}\n\n/* play-pause button */\n#play-pause{\n bottom: 11%;\n left: 44%;\n width: 40px;\n height: 20px;\n}\n\n/* center button */\n.blank{\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: rgb(210, 210, 210);\n position: absolute;\n left: 31%;\n top: 30%;\n}","/* whole navigation bar */\n.bar{\n margin-top: -1px;\n display: flex;\n width: 270px;\n height: 20px;\n min-height: 20px;\n background-color: #E3F2FD;\n border-bottom: 1px solid black;\n}\n\n/* ipod logo */\n.heading{\n margin: 1px 5px;\n padding: 0px;\n}\n\n/* time */\n.time{\n margin: 0px;\n padding: 0px; \n margin: auto;\n}\n\n/* battery icon */\n.battery{\n width: 22px;\n height: 20px;\n}\n\n/* container for battery and play pause icon */\n.right-container-nav{\n display: flex;\n flex-direction: row;\n margin-left: 15px;\n}\n\n/* play pause icon in right */\n.play-pause-nav{\n font-size: 15px;\n margin: 0px;\n margin-right: 8px;\n padding: 0px;\n text-align: center;\n color: #039BE5;\n}\n\n/* notification */\n.notification{\n color: #039BE5;\n margin: 1px;\n margin:auto;\n padding: 0px;\n text-align: center;\n}","/* Container for menu */\n.menu-container{\n display: flex; \n}\n\n/* Menu options */\n.menu{\n background-color: #E3F2FD;\n height: 190px;\n width: 135px;\n}\n\n/* container for Leaf images in menu */\n.leaf{\n border-left: 1px solid black;\n background-color: #E3F2FD;\n height: 190px;\n width: 135px;\n}\n\n/* Heading of menu */\nh3{\n text-align: center;\n margin: 0px;\n padding: 0px;\n}\n\n/* List for menu items */\nul{\n width: 100%;\n padding: 0px;\n list-style: none;\n}\n\n/* list item */\nli{\n padding: 10px 0px;\n}\n\n/* Active list item */\n.active{\n padding-left: 5px;\n position: relative;\n background-color: rgb(55, 150, 220);\n color: white;\n}\n\n/* Arrow sign after list item */\n.active::after{\n position: absolute;\n content: \">\";\n right: 2px;\n}\n\n/* Leaf image */\n.leaf-img{\n border: 2px solid black;\n height: 188px;\n width: 135px;\n}","/* music container */\n.music{\n width: 270px;\n height: 190px;\n background-color: #E3F2FD;\n}\n\n/* heading for music */\nh3{\n margin: 1px;\n}\n\n/* list element */\n.music #song1{\n padding: 0px 0px;\n}","/* container */\n.settings{\n width: 270px;\n height: 200px;\n background-color: #E3F2FD;\n}\n\n/* list element */\nli{\n padding-left: 5px;\n}\n\n/*Adding margins to fit eveything perfectly otherwise things gets overflow*/\nh2 {\n\tmargin: -5px;\n\tmargin-left: 6px;\n\tmargin-top: 7px;\n}","/* container div */\n.now-playing-container{\n width: 270px;\n height: 190px;\n background-color: #E3F2FD;\n}\n\n/* Song details div */\n.song-details{\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 10px;\n}\n\n/* img in song details */\n.song-details img{\n margin: auto;\n margin-top: 10px;\n width: 110px;\n height: 110px;\n}\n\n/* name of song */\n.song-details h6{\n margin: 2px;\n margin-left: 5px;\n font-size: 18px;\n}\n\n/* playing or not */\n.status{\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n}\n\n/* progress of song duration */\n#progress{\n width: 65%;\n height: 10px;\n margin: 0px 5px;\n background-color: gray;\n}\n\n/* progress bar filled */\n#progress-bar{\n height: 10px;\n background-color: green;\n}\n\n.play-pause-nav {\n margin-top: 20px;\n font-size: 18px;\n}",".display{\n /* background-image: url(\"../static/AudioTapes.png\"); */\n background-size: cover;\n background-position: center;\n width: 270px;\n height: 210px;\n margin-top: 25px;\n border: 1.5px solid black;\n padding:3px;\n display: flex;\n flex-direction: column;\n}\n\n.blank-div{\n width: 270px;\n height: 200px;\n background-color: #E3F2FD;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.empty-text{\n margin: 5px;\n text-align: center;\n}","/* list element in themes */\n.theme-li{\n padding: 1px 1px;\n}","/* information leaf on top left */\n\n.information-container{\n top: -542px;\n position: fixed;\n z-index: 2;\n transition: all 0.3s ease-in-out;\n height: max-content;\n color: grey;\n padding: 10px 0px;\n}\n\np{\n margin: 2px;\n}\n\n.info-div{\n border: 2px solid black;\n box-sizing: border-box;\n line-height: 20px;\n font-size: 16px;\n max-width: 300px;\n max-height: 560px;\n background-color: #212121;\n transition: all 0.3s ease-in-out;\n}\n\n#info-btn{\n outline: none;\n border-radius: 10px;\n cursor: pointer;\n text-align: center;\n font-size: 15px;\n color: #f0f5f9;\n background-color: #212121;\n padding: 2px 10px;\n box-sizing: border-box;\n margin-left: 90px;\n}\n\n#info-btn:hover{\n background-color: #ff165d;\n}"],"names":[],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/css/main.cabd6157.css b/static/css/main.cabd6157.css
new file mode 100644
index 0000000..b751094
--- /dev/null
+++ b/static/css/main.cabd6157.css
@@ -0,0 +1,2 @@
+body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:#252324;display:flex;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:90vh;justify-content:center;margin:0;width:100vw}.lock-display{background-color:#fff;font-size:100px;height:150px;opacity:.3}.bottom-div-lock,.lock-display{align-items:center;display:flex;justify-content:center;width:270px}.bottom-div-lock{background-color:#e3f2fd;font-size:15px;height:40px}.case{-webkit-box-reflect:below 8px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(70%,transparent),to(hsla(0,0%,98%,.1)));align-items:center;background-color:#d2d2d2;border-radius:40px;box-shadow:inset 0 0 20px 3px #000;display:flex;flex-direction:column;height:500px;width:300px}.wheel-container{display:flex;margin-bottom:20px;margin-top:auto}.wheel,.wheel-container{height:200px;position:relative;width:200px}.wheel{background-color:#fff;border-radius:50%;cursor:pointer}.controll{color:#d2d2d2;font-weight:900;position:absolute}#menu{font-size:18px;font-weight:900;height:20px;left:38%;top:11%;width:40px}#reverse{left:10%}#forward,#reverse{font-size:23px;top:45%}#forward{right:10%}#play-pause{bottom:11%;height:20px;left:44%;width:40px}.blank{background-color:#d2d2d2;border-radius:50%;height:80px;left:31%;position:absolute;top:30%;width:80px}.bar{background-color:#e3f2fd;border-bottom:1px solid #000;display:flex;height:20px;margin-top:-1px;min-height:20px;width:270px}.heading{margin:1px 5px;padding:0}.time{margin:auto;padding:0}.battery{height:20px;width:22px}.right-container-nav{display:flex;flex-direction:row;margin-left:15px}.play-pause-nav{font-size:15px;margin:0 8px 0 0}.notification,.play-pause-nav{color:#039be5;padding:0;text-align:center}.notification{margin:auto}.menu-container{display:flex}.leaf,.menu{background-color:#e3f2fd;height:190px;width:135px}.leaf{border-left:1px solid #000}h3{margin:0;text-align:center}h3,ul{padding:0}ul{list-style:none;width:100%}li{padding:10px 0}.active{background-color:#3796dc;color:#fff;padding-left:5px;position:relative}.active:after{content:">";position:absolute;right:2px}.leaf-img{border:2px solid #000;height:188px;width:135px}.music{background-color:#e3f2fd;height:190px;width:270px}h3{margin:1px}.music #song1{padding:0}.settings{background-color:#e3f2fd;height:200px;width:270px}li{padding-left:5px}h2{margin:7px -5px -5px 6px}.now-playing-container{background-color:#e3f2fd;height:190px;width:270px}.song-details{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;padding:10px}.song-details img{height:110px;margin:10px auto auto;width:110px}.song-details h6{font-size:18px;margin:2px 2px 2px 5px}.status{align-items:center;display:flex;justify-content:center;margin-top:20px;width:100%}#progress{background-color:gray;height:10px;margin:0 5px;width:65%}#progress-bar{background-color:green;height:10px}.play-pause-nav{font-size:18px;margin-top:20px}.display{background-position:50%;background-size:cover;border:1.5px solid #000;flex-direction:column;height:210px;margin-top:25px;padding:3px}.blank-div,.display{display:flex;width:270px}.blank-div{align-items:center;background-color:#e3f2fd;height:200px;justify-content:center;text-align:center}.empty-text{margin:5px;text-align:center}.theme-li{padding:1px}.information-container{color:grey;height:-webkit-max-content;height:max-content;padding:10px 0;position:fixed;top:-542px;transition:all .3s ease-in-out;z-index:2}p{margin:2px}.info-div{border:2px solid #000;font-size:16px;line-height:20px;max-height:560px;max-width:300px;transition:all .3s ease-in-out}#info-btn,.info-div{background-color:#212121;box-sizing:border-box}#info-btn{border-radius:10px;color:#f0f5f9;cursor:pointer;font-size:15px;margin-left:90px;outline:none;padding:2px 10px;text-align:center}#info-btn:hover{background-color:#ff165d}
+/*# sourceMappingURL=main.cabd6157.css.map*/
\ No newline at end of file
diff --git a/static/css/main.cabd6157.css.map b/static/css/main.cabd6157.css.map
new file mode 100644
index 0000000..a7943fa
--- /dev/null
+++ b/static/css/main.cabd6157.css.map
@@ -0,0 +1 @@
+{"version":3,"file":"static/css/main.cabd6157.css","mappings":"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","sources":["css/index.css","css/App.css","css/Case.css","css/Wheel.css","css/Navbar.css","css/Menu.css","css/Music.css","css/Settings.css","css/Playing.css","css/Display.css","css/Themes.css","css/KnowMore.css"],"sourcesContent":["/* Body */\nbody {\n display: flex;\n width: 100vw;\n height: 90vh;\n background-color: #252324;\n justify-content: center;\n align-items: center;\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n","/* lock icon in lockscreen */\n.lock-display{\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0.3;\n width: 270px;\n height: 150px;\n background-color: white;\n font-size: 100px;\n}\n\n/* Bottom div lockscreen */\n.bottom-div-lock{\n width: 270px;\n height: 40px;\n background-color: #E3F2FD;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 15px;\n}\n\n\n","/* iPod case */\n.case{\n height: 500px;\n width: 300px;\n border-radius: 40px;\n background-color: rgb(210, 210, 210);\n display: flex;\n flex-direction: column;\n align-items: center;\n box-shadow: inset 0 0 20px 3px black;\n -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));\n}\n\n\n","/* wheel container div */\n.wheel-container{\n position: relative;\n width: 200px;\n height: 200px; \n margin-top: auto;\n margin-bottom: 20px;\n display: flex;\n}\n\n/* wheel with border radius 50% */\n.wheel{\n cursor: pointer;\n position: relative;\n width: 200px;\n height: 200px;\n background-color: white; \n border-radius: 50%;\n}\n\n/* all controls */\n.controll{\n color: rgb(210, 210, 210);\n font-weight: 900;\n position: absolute;\n}\n\n/* menu button */\n#menu{\n left: 38%;\n top: 11%;\n font-weight: 900;\n font-size: 18px;\n width: 40px;\n height: 20px;\n}\n\n/* reverse button */\n#reverse{\n left: 10%;\n top: 45%;\n font-size: 23px;\n}\n\n/* forward button */\n#forward{\n right: 10%;\n top: 45%;\n font-size: 23px;\n}\n\n/* play-pause button */\n#play-pause{\n bottom: 11%;\n left: 44%;\n width: 40px;\n height: 20px;\n}\n\n/* center button */\n.blank{\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background-color: rgb(210, 210, 210);\n position: absolute;\n left: 31%;\n top: 30%;\n}","/* whole navigation bar */\n.bar{\n margin-top: -1px;\n display: flex;\n width: 270px;\n height: 20px;\n min-height: 20px;\n background-color: #E3F2FD;\n border-bottom: 1px solid black;\n}\n\n/* ipod logo */\n.heading{\n margin: 1px 5px;\n padding: 0px;\n}\n\n/* time */\n.time{\n margin: 0px;\n padding: 0px; \n margin: auto;\n}\n\n/* battery icon */\n.battery{\n width: 22px;\n height: 20px;\n}\n\n/* container for battery and play pause icon */\n.right-container-nav{\n display: flex;\n flex-direction: row;\n margin-left: 15px;\n}\n\n/* play pause icon in right */\n.play-pause-nav{\n font-size: 15px;\n margin: 0px;\n margin-right: 8px;\n padding: 0px;\n text-align: center;\n color: #039BE5;\n}\n\n/* notification */\n.notification{\n color: #039BE5;\n margin: 1px;\n margin:auto;\n padding: 0px;\n text-align: center;\n}","/* Container for menu */\n.menu-container{\n display: flex; \n}\n\n/* Menu options */\n.menu{\n background-color: #E3F2FD;\n height: 190px;\n width: 135px;\n}\n\n/* container for Leaf images in menu */\n.leaf{\n border-left: 1px solid black;\n background-color: #E3F2FD;\n height: 190px;\n width: 135px;\n}\n\n/* Heading of menu */\nh3{\n text-align: center;\n margin: 0px;\n padding: 0px;\n}\n\n/* List for menu items */\nul{\n width: 100%;\n padding: 0px;\n list-style: none;\n}\n\n/* list item */\nli{\n padding: 10px 0px;\n}\n\n/* Active list item */\n.active{\n padding-left: 5px;\n position: relative;\n background-color: rgb(55, 150, 220);\n color: white;\n}\n\n/* Arrow sign after list item */\n.active::after{\n position: absolute;\n content: \">\";\n right: 2px;\n}\n\n/* Leaf image */\n.leaf-img{\n border: 2px solid black;\n height: 188px;\n width: 135px;\n}","/* music container */\n.music{\n width: 270px;\n height: 190px;\n background-color: #E3F2FD;\n}\n\n/* heading for music */\nh3{\n margin: 1px;\n}\n\n/* list element */\n.music #song1{\n padding: 0px 0px;\n}","/* container */\n.settings{\n width: 270px;\n height: 200px;\n background-color: #E3F2FD;\n}\n\n/* list element */\nli{\n padding-left: 5px;\n}\n\n/*Adding margins to fit eveything perfectly otherwise things gets overflow*/\nh2 {\n\tmargin: -5px;\n\tmargin-left: 6px;\n\tmargin-top: 7px;\n}","/* container div */\n.now-playing-container{\n width: 270px;\n height: 190px;\n background-color: #E3F2FD;\n}\n\n/* Song details div */\n.song-details{\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 10px;\n}\n\n/* img in song details */\n.song-details img{\n margin: auto;\n margin-top: 10px;\n width: 110px;\n height: 110px;\n}\n\n/* name of song */\n.song-details h6{\n margin: 2px;\n margin-left: 5px;\n font-size: 18px;\n}\n\n/* playing or not */\n.status{\n margin-top: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n}\n\n/* progress of song duration */\n#progress{\n width: 65%;\n height: 10px;\n margin: 0px 5px;\n background-color: gray;\n}\n\n/* progress bar filled */\n#progress-bar{\n height: 10px;\n background-color: green;\n}\n\n.play-pause-nav {\n margin-top: 20px;\n font-size: 18px;\n}",".display{\n /* background-image: url(\"../static/AudioTapes.png\"); */\n background-size: cover;\n background-position: center;\n width: 270px;\n height: 210px;\n margin-top: 25px;\n border: 1.5px solid black;\n padding:3px;\n display: flex;\n flex-direction: column;\n}\n\n.blank-div{\n width: 270px;\n height: 200px;\n background-color: #E3F2FD;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n}\n\n.empty-text{\n margin: 5px;\n text-align: center;\n}","/* list element in themes */\n.theme-li{\n padding: 1px 1px;\n}","/* information leaf on top left */\n\n.information-container{\n top: -542px;\n position: fixed;\n z-index: 2;\n transition: all 0.3s ease-in-out;\n height: max-content;\n color: grey;\n padding: 10px 0px;\n}\n\np{\n margin: 2px;\n}\n\n.info-div{\n border: 2px solid black;\n box-sizing: border-box;\n line-height: 20px;\n font-size: 16px;\n max-width: 300px;\n max-height: 560px;\n background-color: #212121;\n transition: all 0.3s ease-in-out;\n}\n\n#info-btn{\n outline: none;\n border-radius: 10px;\n cursor: pointer;\n text-align: center;\n font-size: 15px;\n color: #f0f5f9;\n background-color: #212121;\n padding: 2px 10px;\n box-sizing: border-box;\n margin-left: 90px;\n}\n\n#info-btn:hover{\n background-color: #ff165d;\n}"],"names":[],"sourceRoot":""}
\ No newline at end of file