Update freakymas.css

Freakybob-Team · Nov 5, 2024 · a662781 · a662781
1 parent abe36ba
commit a662781
Showing 1 changed file with 106 additions and 100 deletions.
diff --git a/css/freakymas.css b/css/freakymas.css
@@ -44,24 +44,7 @@ h2 {
   color: yellow;
 }
 
-button {
-  margin-top: 12px;
-  padding: 15px 25px;
-  font-size: 18px;
-  cursor: pointer;
-  background-color: rgb(172, 147, 5);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  transition: all 0.3s ease;
-  max-width: 220px;
-  width: 100%;
-}
-button:hover {
-  background-color: rgb(218, 203, 3);
-  transform: translateY(-3px) scale(1.05);
-}
+
 #info-button {
 margin-top: 12px;
   padding: 15px 25px;
@@ -149,92 +132,11 @@ margin-top: 12px;
   max-width: 220px;
   width: 100%;
 }
-#scratch-button:hover {
+#activities-button:hover {
   background-color: rgb(218, 203, 3);
   transform: translateY(-3px) scale(1.05);
 }
-#mute-button {
-  position: fixed;
-  margin-top:-640px;
-  margin-left: 88%;
-  padding: 5px 10px;
-  background-color: rgb(1, 170, 128);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  z-index: 1001;
-}
 
-#github-button,
-#discord-button,
-#bluesky-button,
-#freakyblog-logo,
-#pikidiary-button {
-  position: fixed;
-  z-index: 1001;
-}
-
-#github-button {
- margin-top: 660px;
-margin-left: 190px;
-transition: .3s;
-transition-timing-function: ease-in-out;
-}
-
-#discord-button {
-  margin-top: 660px;
-  margin-left: 80px;
-  transition: .3s;
-  transition-timing-function: ease-in-out;
-}
-
-#bluesky-button {
-  margin-top: 660px;
-  margin-left: -50px;
-  transition: .3s;
-  transition-timing-function: ease-in-out;
-}
-
-#github-button img,
-#bluesky-button img {
-  width: 40px;
-  height: 40px;
-  transition: .3s;
-}
-
-#github-button img:hover,
-#bluesky-button img:hover {
-  transform: scale(1.1);
-}
-#discord-button img {
-  width: 80px;
-  height: 60px;
-  transition: .3s;
-  transition-timing-function: ease-in-out;
-}
-#discord-button img:hover {
-  transform: scale(1.1);
-}
-
-#freakyblog-logo {
-  position: fixed;
-  margin-top: 620px;
-  margin-left: -210px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  transition: .3s;
-  transition-timing-function: ease-in-out;
-}
-#freakyblog-logo img {
-  position: fixed;
-  width: 40px;
-  height: 40px;
-}
-  #freakyblog-logo:hover {
-      transform: scale(1.1);
-  }
 
 #gpl-3 {
   text-align: center;
@@ -252,7 +154,72 @@ transition-timing-function: ease-in-out;
   z-index: -2;
   margin-left: -700px;
 }
+#music-player {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 220px;
+  background-color: #006b79; 
+  border: 4px solid #b22222;
+  border-radius: 15px;
+  padding: 15px 10px;
+  color: #fff;
+  font-family: Arial, sans-serif;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  z-index: 1000;
+}
+
+
+#music-player #current-song {
+  font-size: 0.9em;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #92fc77;
+  background-color: rgb(10, 95, 71);
+  border-radius: 8px;
+  padding: 5px 10px;
+}
+
+
+#music-player button {
+  background-color: #b22222; 
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  margin: 5px 3px;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+#music-player button:hover {
+  background-color: #ff6347;
+  transform: scale(1.1);
+}
+
 
+
+
+#music-player::after {
+  content: '✨';
+  position: absolute;
+  color: #fffacd;
+  font-size: 1.2em;
+  top: -5px;
+  left: 15px;
+  animation: sparkle 2s infinite ease-in-out;
+}
+
+
+@keyframes sparkle {
+  0%, 100% { opacity: 0; transform: scale(0.8) rotate(0deg); }
+  50% { opacity: 1; transform: scale(1) rotate(20deg); }
+}
 a {
 text-decoration: none;
 color: wheat;
@@ -302,5 +269,44 @@ font-size: 15px;
 #scratch-button {
 font-size: 15px;
 }
+#music-player {
+  margin-right: 35px;
+  height: 30px;
+  width: 200px;
+  font-size: 15px;
+  bottom: 590px;
+  right: 10px;
+}
+#music-player #current-song {
+  font-size: 0.9em;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: #92fc77;
+  background-color: rgb(10, 95, 71);
+  border-radius: 8px;
+  padding: 5px 10px;
+  margin-top: -10px;
+}
+#music-player button {
+  background-color: #b22222; 
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 35px;
+  height: 25px;
+  margin: 5px 3px;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+  margin-top: -5px;
+}
+#music-credits {
+  font-size: 15px;
+  margin-top: -450px;
+}
+#gpl-3 {
+margin-top: -10px;
 }
 
+
+}