stream/streamerbot-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add AppleMusic Module

Browse Source
This commit is contained in:
Stephane Bouvard
2025-07-23 16:29:05 +02:00
parent d7101033e7
commit b24850725d
5 changed files with 593 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
modules/apple-music/css/apple-music.css Normal file
View File

@@ -0,0 +1,139 @@
#musicWidgetContainer {
--corner-radius: 10px;
--album-art-size: 100px;
position: absolute;
width: 600px;
height: 140px;
top: 20px;
right: 0px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
display: flex;
height: var(--album-art-size);
margin: 20px;
filter: drop-shadow(0px 0px 4px #000000);
width: 100%;
max-width: 500px;
bottom: 45%;
opacity: 0;
}
#musicWidgetContainer #albumArtBox {
background: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: var(--corner-radius);
overflow: hidden;
margin: 0px 8px 0px 0px;
}
#musicWidgetContainer #albumArt {
position: absolute;
width: var(--album-art-size);
}
#musicWidgetContainer #albumArtBack {
width: var(--album-art-size);
}
#musicWidgetContainer #songInfoBox {
position: relative;
color: white;
width: calc(100% - 125px);
display: flex;
flex-direction: column;
flex: 0 1 auto;
justify-content: center;
z-index: 1;
text-shadow: 2px 2px 2px black;
overflow: hidden;
z-index: 4;
}
#musicWidgetContainer #songInfo {
background: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: var(--corner-radius);
padding: 0px 20px;
height: 100%;
overflow: hidden;
}
#musicWidgetContainer #IAmRunningOutOfNamesForTheseBoxes {
width: calc(100% - 40px);
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#musicWidgetContainer #backgroundArt {
position: absolute;
height: 100%;
width: 100%;
border-radius: var(--corner-radius);
overflow: hidden;
z-index: -1;
opacity: 0.9;
}
#musicWidgetContainer #backgroundImage {
filter: blur(20px);
position: absolute;
width: 140%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#musicWidgetContainer #backgroundImageBack {
filter: blur(20px);
position: absolute;
width: 140%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
}
#musicWidgetContainer #songLabel {
font-weight: bold;
font-size: 20px;
white-space: nowrap;
}
#musicWidgetContainer #artistLabel {
font-size: 16px;
font-weight: 100;
font-style: italic;
white-space: nowrap;
}
#musicWidgetContainer #albumLabel {
font-size: 12px;
font-weight: 100;
white-space: nowrap;
}
#musicWidgetContainer #progressBg {
margin-top: 5px;
width: 100%;
height: auto;
border-radius: 5px;
background-color: #1F1F1F;
}
#musicWidgetContainer #progressBar {
border-radius: 5px;
height: 5px;
width: 20%;
background-color: #ffffff;
margin: 10px 0px;
}
#musicWidgetContainer #times {
position: relative;
height: 10px;
font-size: 8px;
font-weight: 700;
line-height: 3.5;
}
#musicWidgetContainer #progressTime {
position: absolute;
}
#musicWidgetContainer #duration {
position: absolute;
width: 100%;
text-align: right;
}
#musicWidgetContainer .text-show {
opacity: 1;
transition: all 0.25s ease;
}
#musicWidgetContainer .text-fade {
opacity: 0;
transition: all 0.25s ease;
}

163
modules/apple-music/css/apple-music.less Normal file
View File

@@ -0,0 +1,163 @@
// out: apple-music.css, sourcemap: false, compress: false
#musicWidgetContainer {
--corner-radius: 10px;
--album-art-size: 100px;
position: absolute;
width: 600px;
height: 140px;
top: 20px;
right: 0px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
display: flex;
height: var(--album-art-size);
margin: 20px;
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
width: 100%;
max-width: 500px;
bottom: 45%;
opacity: 0;
#albumArtBox {
background: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: var(--corner-radius);
overflow: hidden;
margin: 0px 8px 0px 0px;
}
#albumArt {
position: absolute;
width: var(--album-art-size);
}
#albumArtBack {
width: var(--album-art-size);
}
#songInfoBox {
position: relative;
color: white;
width: calc(100% - 125px);
display: flex;
flex-direction: column;
flex: 0 1 auto;
justify-content: center;
z-index: 1;
text-shadow: 2px 2px 2px black;
overflow: hidden;
z-index: 4;
}
#songInfo {
background: rgba(0, 0, 0, 0.5);
position: relative;
border-radius: var(--corner-radius);
padding: 0px 20px;
height: 100%;
overflow: hidden;
}
#IAmRunningOutOfNamesForTheseBoxes {
position: absolute;
width: calc(100% - 40px);
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#backgroundArt {
position: absolute;
height: 100%;
width: 100%;
border-radius: var(--corner-radius);
overflow: hidden;
z-index: -1;
opacity: 0.9;
}
#backgroundImage {
filter: blur(20px);
position: absolute;
width: 140%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#backgroundImageBack {
filter: blur(20px);
position: absolute;
width: 140%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
}
#songLabel {
font-weight: bold;
font-size: 20px;
white-space: nowrap;
}
#artistLabel {
font-size: 16px;
font-weight: 100;
font-style: italic;
white-space: nowrap;
}
#albumLabel {
font-size: 12px;
font-weight: 100;
white-space: nowrap;
}
#progressBg {
margin-top: 5px;
width: 100%;
height: auto;
border-radius: 5px;
background-color: #1F1F1F;
}
#progressBar {
border-radius: 5px;
height: 5px;
width: 20%;
background-color: #ffffff;
margin: 10px 0px;
}
#times {
position: relative;
height: 10px;
font-size: 8px;
font-weight: 700;
line-height: 3.5;
}
#progressTime {
position: absolute;
}
#duration {
position: absolute;
width: 100%;
text-align: right;
}
.text-show {
opacity: 1;
transition: all 0.25s ease;
}
.text-fade {
opacity: 0;
transition: all 0.25s ease;
}
}