diff --git a/css/default.css b/css/default.css new file mode 100644 index 0000000..ecfa75f --- /dev/null +++ b/css/default.css @@ -0,0 +1,143 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: #000; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; +} + +/* Main widget container */ +.widget-container { + position: relative; + display: flex; + width: 100%; + max-width: 650px; + aspect-ratio: auto; + height: 200px; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.95); + margin: 20px; +} + +/* Blurred background layer (z-index: 0) */ +.background-blur { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + overflow: hidden; +} + +.background-image { + width: 100%; + height: 100%; + object-fit: cover; + filter: blur(40px) brightness(0.6); +} + +/* Dark overlay (z-index: 1) */ +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 1; + pointer-events: none; +} + +/* Content layer (z-index: 2) */ +.widget-content { + position: relative; + display: flex; + gap: 24px; + padding: 20px; + z-index: 2; + width: 100%; + height: 100%; + align-items: center; +} + +/* Album art box (left) */ +.album-art-box { + flex-shrink: 0; + width: 140px; + height: 140px; + border-radius: 10px; + overflow: hidden; + background: rgba(60, 60, 60, 0.5); + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); +} + +.album-art { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Song info box (right) */ +.song-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: 4px; + min-width: 0; + padding: 0 12px; +} + +/* Song title */ +.song-title { + font-size: 30px; + font-weight: 700; + color: #ffffff; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + letter-spacing: -0.5px; + line-height: 1.1; +} + +/* Song artist */ +.song-artist { + font-size: 22px; + font-weight: 500; + color: #ffffff; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + letter-spacing: -0.3px; + line-height: 1.1; + opacity: 1; +} + +/* Smooth fade animation for updates */ +@keyframes fadeIn { + from { + opacity: 0.5; + } + to { + opacity: 1; + } +} + +.song-title.updating, +.song-artist.updating { + animation: fadeIn 0.4s ease-in-out; +} diff --git a/css/minecraft.css b/css/minecraft.css new file mode 100644 index 0000000..8405426 --- /dev/null +++ b/css/minecraft.css @@ -0,0 +1,20 @@ +#widget-container { + background-image: url("file:///E:/Stream-resources/img/Alert/Toast3.png") !important; + background-size: 100% 100% !important; + background-color: transparent !important; + backdrop-filter: none !important; + border: none !important; + display: flex !important; + align-items: center !important; + padding: 10px !important; +} + +#title { + font-family: "Comic Sans MS" !important; + color: white !important; +} + +#artist { + font-family: "Comic Sans MS" !important; + color: yellow !important; +} \ No newline at end of file