From a662781c528087fef211bee8872c1e29c883d121 Mon Sep 17 00:00:00 2001 From: Squirrel Date: Mon, 4 Nov 2024 20:12:04 -0800 Subject: [PATCH] Update freakymas.css --- css/freakymas.css | 206 ++++++++++++++++++++++++---------------------- 1 file changed, 106 insertions(+), 100 deletions(-) diff --git a/css/freakymas.css b/css/freakymas.css index 27887a5..c020ab1 100644 --- 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; } + +}