diff --git a/package.json b/package.json
index 4f2e4a8..4267bda 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "@example/basics",
- "version": "0.0.1",
+ "name": "nookoffice",
+ "version": "1.0.0",
"private": true,
"scripts": {
"dev": "astro dev",
@@ -9,16 +9,16 @@
"preview": "astro preview"
},
"dependencies": {
- "@astrojs/react": "^1.2.2",
- "@types/node": "^18.11.9",
- "@types/yt-player": "^3.5.1",
- "astro": "^1.6.11",
- "node": "^19.1.0",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "yt-player": "^3.6.1"
+ "@astrojs/react": "1.2.2",
+ "@types/node": "18.11.9",
+ "@types/yt-player": "3.5.1",
+ "astro": "1.6.11",
+ "node": "19.1.0",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "yt-player": "3.6.1"
},
"devDependencies": {
- "@astrojs/partytown": "^1.0.2"
+ "@astrojs/partytown": "1.0.2"
}
}
diff --git a/src/components/Controls.astro b/src/components/Controls.astro
index 76145ba..bf5131d 100644
--- a/src/components/Controls.astro
+++ b/src/components/Controls.astro
@@ -50,7 +50,6 @@ import "./controls.css";
}
}
function refreshGIF() {
- console.log("clicked");
var feed = document.getElementById("feed");
if (feed) {
@@ -62,11 +61,11 @@ import "./controls.css";
}
function layerRain() {
- rainPlayer.load("bunZqTrXufI", true);
- rainPlayer.setVolume(50);
+ rainPlayer.load("q76bMs-NwRk", true);
+ rainPlayer.setVolume(30);
if (feedback) {
- feedback.innerHTML = "Layering Rain...";
+ feedback.innerHTML = "It started Raining...";
}
rainPlayer.on("ended", () => {
@@ -112,12 +111,12 @@ import "./controls.css";
) {
rainPlayer.play();
if (feedback) {
- feedback.innerHTML = "Adding rain..";
+ feedback.innerHTML = "It started raining...";
}
} else {
rainPlayer.pause();
if (feedback) {
- feedback.innerHTML = "No more rain..";
+ feedback.innerHTML = "The rain is gone...";
}
}
break;
@@ -132,25 +131,25 @@ import "./controls.css";
case "pause":
if (feedback) {
feedback.innerHTML =
- "Press to Pause..";
+ "Press to Pause...";
}
break;
case "play":
if (feedback) {
feedback.innerHTML =
- "Press to Play..";
+ "Press to Play...";
}
break;
case "refresh":
if (feedback) {
feedback.innerHTML =
- "Press to Refresh GIF..";
+ "Press to Shuffle GIF...";
}
break;
case "layerRain":
if (feedback) {
feedback.innerHTML =
- "Press to Layer Rain..";
+ "Press to add Rain sound layer...";
}
break;
}
@@ -242,7 +241,6 @@ import "./controls.css";
default:
null;
}
- console.log("Updating...");
}
// Used for displaying a clock
diff --git a/src/components/Creds.astro b/src/components/Creds.astro
index d65e343..87e45ca 100644
--- a/src/components/Creds.astro
+++ b/src/components/Creds.astro
@@ -54,7 +54,6 @@ import Button from "./Button.astro";
width: 100%;
display: flex;
justify-content: flex-end;
- margin-left: 10px;
align-items: flex-end;
height: 100%;
}
@@ -73,7 +72,7 @@ import Button from "./Button.astro";
display: flex;
justify-content: center;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 20px !important;
width: 100%;
flex-wrap: wrap;
diff --git a/src/components/controls.css b/src/components/controls.css
index f26ccc5..e113c41 100644
--- a/src/components/controls.css
+++ b/src/components/controls.css
@@ -10,6 +10,7 @@
background-color: #5baaab;
border-radius: 25px;
}
+
.player-controls img.control {
width: 35px;
height: 35px;
@@ -17,10 +18,12 @@
margin-right: 15px;
opacity: 1;
}
+
.player-controls img.control:hover {
cursor: pointer;
opacity: 0.75;
}
+
.hidden {
visibility: hidden;
position: absolute;
@@ -30,93 +33,90 @@
height: 1px;
/* pointer-events: none; */
}
+
#feedback {
font-size: 1rem;
color: #fffdf2;
margin: 0;
padding: 0;
}
+
.right-ctrl {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
-#range {
- background-color: transparent;
-}
/* slider */
+/*Range Reset*/
+input[type="range"] {
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+ width: 15rem;
+}
+
+/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
+
+/***** Chrome, Safari, Opera and Edge Chromium styles *****/
+/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
- width: 100%;
- height: 11px;
- cursor: pointer;
- animate: 0.2s;
- background: #fff;
- border-radius: 50px;
+ background-color: #fffdf2;
+ border-radius: 0.5rem;
+ height: 0.5rem;
}
+
+/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
- border: 4px solid #5baaab;
- height: 18px;
- width: 18px;
- border-radius: 4px;
- background: #5baaab;
- cursor: pointer;
+ -webkit-appearance: none;
+ /* Override default look */
+ appearance: none;
+ margin-top: -8px;
+ /* Centers thumb on the track */
+
+ /*custom styles*/
+ background-color: #5baaab;
+ height: 1.5rem;
+ width: 1.5rem;
+ border: 3px solid #fffdf2;
+ border-radius: 3px;
}
-input[type="range"]:focus::-webkit-slider-runnable-track {
- background: #fff;
+
+input[type="range"]:focus::-webkit-slider-thumb {
+ border: 3px solid #fffdf2;
+ outline: none;
+ /* outline-offset: 0.125rem; */
}
+
+/******** Firefox styles ********/
+/* slider track */
input[type="range"]::-moz-range-track {
- width: 100%;
- height: 11px;
- cursor: pointer;
- animate: 0.2s;
- box-shadow: 0px 0px 0px #000000;
- background: #fff;
- border-radius: 50px;
- border: 0px solid #000000;
+ background-color: #fffdf2;
+ border-radius: 0.5rem;
+ height: 0.5rem;
}
+
+/* slider thumb */
input[type="range"]::-moz-range-thumb {
- border: 4px solid #fff;
- height: 18px;
- width: 18px;
- border-radius: 4px;
- background: #5baaab;
- cursor: pointer;
-}
-input[type="range"]::-ms-track {
- width: 100%;
- height: 11px;
- cursor: pointer;
- animate: 0.2s;
- background: transparent;
- border-color: transparent;
- color: transparent;
-}
-input[type="range"]::-ms-fill-lower {
- background: #fff;
- border-radius: 100px;
-}
-input[type="range"]::-ms-fill-upper {
- background: #fff;
- border-radius: 100px;
-}
-input[type="range"]::-ms-thumb {
- margin-top: 1px;
- border: 4px solid #fff;
- height: 18px;
- width: 18px;
- border-radius: 4px;
- background: #5baaab;
- cursor: pointer;
-}
-input[type="range"]:focus::-ms-fill-lower {
- background: #fff;
+ border: none;
+ /*Removes extra border that FF applies*/
+ border-radius: 0;
+ /*Removes default border-radius that FF applies*/
+
+ /*custom styles*/
+ background-color: #5cd5eb;
+ height: 2rem;
+ width: 1rem;
}
-input[type="range"]:focus::-ms-fill-upper {
- background: #fff;
+
+input[type="range"]:focus::-moz-range-thumb {
+ border: 3px solid #fffdf2;
+ outline: none;
+ /* outline-offset: 0.125rem; */
}
@media only screen and (max-width: 1100px) {
@@ -125,7 +125,7 @@ input[type="range"]:focus::-ms-fill-upper {
flex-direction: column !important;
}
- .player-controls > * {
+ .player-controls>* {
margin-bottom: 1rem;
width: 100%;
@@ -133,6 +133,7 @@ input[type="range"]:focus::-ms-fill-upper {
justify-content: center;
align-items: center;
}
+
.player-controls p {
text-align: left;
justify-content: flex-end;
@@ -144,6 +145,7 @@ input[type="range"]:focus::-ms-fill-upper {
position: absolute;
left: 0;
}
+
#range {
width: 100%;
margin: 1rem 0;
@@ -162,6 +164,7 @@ input[type="range"]:focus::-ms-fill-upper {
.player-controls p:before {
content: "";
}
+
.player-controls p {
text-align: left;
justify-content: flex-start;
@@ -174,7 +177,8 @@ input[type="range"]:focus::-ms-fill-upper {
.ctrl-wrapper {
margin-bottom: 0;
}
+
.right-ctrl {
max-height: 50px;
}
-}
+}
\ No newline at end of file