Added visual representation of the room scale
This commit is contained in:
booploops
parent
9ce6dc8fd3
commit
d5c393c071
2 changed files with 141 additions and 83 deletions
|
|
@ -340,7 +340,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-icon {
|
||||
.app-sidebar-button > .sidebar-user-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -351,18 +351,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background-size: contain;
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-text {
|
||||
.app-sidebar-button > .sidebar-user-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-text .fullname {
|
||||
.app-sidebar-button > .sidebar-user-text .fullname {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-text .handle-text {
|
||||
.app-sidebar-button > .sidebar-user-text .handle-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
text-align: left;
|
||||
|
|
@ -650,25 +650,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:hover {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:active {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range] {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range] {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
|
@ -677,7 +677,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
|
|
@ -687,7 +687,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-runnable-track {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
|
@ -703,7 +703,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-title {
|
||||
.app-chrome .app-chrome-item > .app-title {
|
||||
width: 100px;
|
||||
font-size: 13px;
|
||||
background: url("./logotmp.png");
|
||||
|
|
@ -717,23 +717,23 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls {
|
||||
.app-chrome .app-chrome-item > .window-controls {
|
||||
width: 138px;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div {
|
||||
.app-chrome .app-chrome-item > .window-controls > div {
|
||||
height: 100%;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div:hover {
|
||||
.app-chrome .app-chrome-item > .window-controls > div:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.close {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.close {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
|
|
@ -746,7 +746,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.minmax {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.minmax {
|
||||
background-image: var(--gfx-maxBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -755,11 +755,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.minmax.restore {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
|
||||
background-image: var(--gfx-restoreBtn);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.minimize {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.minimize {
|
||||
background-image: var(--gfx-minBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -777,14 +777,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
border-right: 1px solid rgb(200 200 200 / 8%);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-name {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
|
|
@ -793,7 +793,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-duration p {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
height: 1.2em;
|
||||
|
|
@ -802,7 +802,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
margin: 0 0 0.5em;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-artist {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
|
|
@ -813,7 +813,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
/* animation: marquee 10s linear infinite; */
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-progress {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress {
|
||||
@bgColor: transparent;
|
||||
//height: 16px;
|
||||
position: absolute;
|
||||
|
|
@ -822,7 +822,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background: @bgColor;
|
||||
|
||||
&:hover {
|
||||
>input[type=range] {
|
||||
> input[type=range] {
|
||||
&::-webkit-slider-thumb {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
|
@ -831,7 +831,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
}
|
||||
|
||||
>input[type=range] {
|
||||
> input[type=range] {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
|
|
@ -871,7 +871,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .artwork {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: var(--artwork);
|
||||
|
|
@ -885,7 +885,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .actions {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .actions {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 2px;
|
||||
|
|
@ -897,7 +897,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
filter: contrast(0.8);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .playback-info {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .playback-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -906,7 +906,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .playback-info>div {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -1476,7 +1476,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
|
||||
.lyric-line.active .lyricWaiting>div {
|
||||
.lyric-line.active .lyricWaiting > div {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
|
|
@ -1585,6 +1585,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.handle {
|
||||
margin: 4px;
|
||||
opacity: 0.7;
|
||||
|
|
@ -1644,7 +1645,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
overflow-y: overlay;
|
||||
}
|
||||
|
||||
.modal-footer {}
|
||||
.modal-footer {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1656,6 +1658,42 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
max-width: 800px;
|
||||
overflow: hidden;
|
||||
|
||||
.visual-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visual {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
width: 300px;
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
filter: drop-shadow(2px 12px 6px rgb(0 0 0 / 25%));
|
||||
margin: 0 auto;
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
width: calc(12px * 6);
|
||||
height: calc(12px * 6);
|
||||
border-radius: 6px;
|
||||
transform: rotateX(60deg) rotateZ(-45deg);
|
||||
transition: transform 0.2s var(--appleEase);
|
||||
}
|
||||
|
||||
.face:nth-of-type(1) {
|
||||
background: linear-gradient(45deg, #28223a, #1f2038);
|
||||
}
|
||||
|
||||
.face:nth-of-type(2) {
|
||||
background: linear-gradient(45deg, #7d53ad, #5763ff);
|
||||
transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
|
|
@ -1754,7 +1792,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.name {}
|
||||
.name {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--selected);
|
||||
|
|
@ -1811,7 +1850,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
transition: transform 0s var(--appleEase);
|
||||
}
|
||||
|
||||
>svg {
|
||||
> svg {
|
||||
width: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1819,7 +1858,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
&:hover {
|
||||
background: var(--selected);
|
||||
|
||||
>svg {
|
||||
> svg {
|
||||
color: rgba(200, 200, 200, 1.0);
|
||||
}
|
||||
}
|
||||
|
|
@ -1843,7 +1882,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reload-btn>svg {
|
||||
.reload-btn > svg {
|
||||
height: 50%;
|
||||
color: #eee;
|
||||
}
|
||||
|
|
@ -1869,7 +1908,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
flex-flow: wrap;
|
||||
justify-content: center;
|
||||
|
||||
>.cd-mediaitem-square {
|
||||
> .cd-mediaitem-square {
|
||||
width: 220px;
|
||||
height: 260px;
|
||||
display: inline-flex;
|
||||
|
|
@ -2023,7 +2062,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
appearance: none;
|
||||
box-shadow: var(--ciderShadow-Generic);
|
||||
|
||||
>svg {
|
||||
> svg {
|
||||
height: 50%;
|
||||
color: #eee;
|
||||
pointer-events: none;
|
||||
|
|
@ -2138,7 +2177,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
background: var(--selected-click);
|
||||
}
|
||||
|
||||
>svg {
|
||||
> svg {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -2278,13 +2317,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
&.no-shadow {
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.subtle-shadow {
|
||||
box-shadow: var(--mediaItemShadow-ShadowSubtle);
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
}
|
||||
|
|
@ -2613,7 +2655,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
>.cd-mediaitem-square-large-overlay {
|
||||
> .cd-mediaitem-square-large-overlay {
|
||||
z-index: 3;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -2621,11 +2663,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
+.cd-mediaitem-square-large-overlay {
|
||||
+ .cd-mediaitem-square-large-overlay {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover+.cd-mediaitem-square-large-overlay {
|
||||
&:hover + .cd-mediaitem-square-large-overlay {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
|
@ -2636,7 +2678,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* mediaitem-square-large */
|
||||
.cd-mediaitem-square-large {
|
||||
width: 190px;
|
||||
|
|
@ -2651,7 +2692,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
>* {
|
||||
> * {
|
||||
z-index: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -2681,25 +2722,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large-overlay>* {
|
||||
.cd-mediaitem-square-large-overlay > * {
|
||||
pointer-events: auto;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay {
|
||||
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large>.cd-mediaitem-square-large-overlay:hover {
|
||||
.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large+.cd-mediaitem-square-large-overlay {
|
||||
.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-square-large:hover+.cd-mediaitem-square-large-overlay {
|
||||
.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
|
@ -2736,7 +2777,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
>* {
|
||||
> * {
|
||||
z-index: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -2766,25 +2807,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
}
|
||||
|
||||
.cd-mediaitem-mvview-overlay>* {
|
||||
.cd-mediaitem-mvview-overlay > * {
|
||||
pointer-events: auto;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay {
|
||||
.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover {
|
||||
.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay {
|
||||
.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay {
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay {
|
||||
.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay {
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
|
@ -2837,8 +2878,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
>.play-btn,
|
||||
>.menu-btn {
|
||||
> .play-btn,
|
||||
> .menu-btn {
|
||||
opacity: 0;
|
||||
appearance: none;
|
||||
padding: 0px;
|
||||
|
|
@ -2852,14 +2893,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
transition: opacity 0.1s var(--appleEase);
|
||||
}
|
||||
|
||||
>.play-btn {
|
||||
> .play-btn {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 14px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
>.menu-btn {
|
||||
> .menu-btn {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
right: 14px;
|
||||
|
|
@ -2868,8 +2909,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
&:hover {
|
||||
|
||||
>.play-btn,
|
||||
>.menu-btn {
|
||||
> .play-btn,
|
||||
> .menu-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -2919,7 +2960,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
/* mediaitem-square */
|
||||
.albums-square-containeru>*>.cd-mediaitem-square {
|
||||
.albums-square-containeru > * > .cd-mediaitem-square {
|
||||
--frame: max(220px, 15vw);
|
||||
width: var(--frame);
|
||||
height: calc(var(--frame) * 13 / 11);
|
||||
|
|
@ -2950,8 +2991,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
>.play-btn,
|
||||
>.menu-btn {
|
||||
> .play-btn,
|
||||
> .menu-btn {
|
||||
opacity: 0;
|
||||
appearance: none;
|
||||
padding: 0px;
|
||||
|
|
@ -2965,14 +3006,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
transition: opacity 0.1s var(--appleEase);
|
||||
}
|
||||
|
||||
>.play-btn {
|
||||
> .play-btn {
|
||||
position: absolute;
|
||||
bottom: calc(var(--frame) / 220 * 14);
|
||||
left: calc(var(--frame) / 220 * 14);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
>.menu-btn {
|
||||
> .menu-btn {
|
||||
position: absolute;
|
||||
bottom: calc(var(--frame) / 220 * 14);
|
||||
right: calc(var(--frame) / 220 * 14);
|
||||
|
|
@ -2981,8 +3022,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
|
||||
&:hover {
|
||||
|
||||
>.play-btn,
|
||||
>.menu-btn {
|
||||
> .play-btn,
|
||||
> .menu-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -3255,7 +3296,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#apple-music-video-player-controls #player-pip>svg {
|
||||
#apple-music-video-player-controls #player-pip > svg {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -3274,7 +3315,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#apple-music-video-player-controls #player-fullscreen>svg {
|
||||
#apple-music-video-player-controls #player-fullscreen > svg {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,30 +10,31 @@
|
|||
<div class="col">
|
||||
<label>
|
||||
Width
|
||||
<input type="number" min="0" @change="setRoom()"
|
||||
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
|
||||
v-model="app.cfg.audio.spatial_properties.room_dimensions.width" step="1"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label>
|
||||
Height
|
||||
<input type="number" min="0" @change="setRoom()"
|
||||
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
|
||||
v-model="app.cfg.audio.spatial_properties.room_dimensions.height" step="1"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label>
|
||||
Depth
|
||||
<input type="number" min="0" @change="setRoom()"
|
||||
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
|
||||
v-model="app.cfg.audio.spatial_properties.room_dimensions.depth" step="1"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label>
|
||||
<label v-if="!app.cfg.audio.normalization">
|
||||
Gain
|
||||
<input type="number" min="0" @change="setRoom()" v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
|
||||
<input type="number" min="0" @change="setRoom()" style="width: 100%;font-size: 1em;font-family: inherit;"
|
||||
v-model="app.cfg.audio.spatial_properties.gain" step="0.1"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col visual-container">
|
||||
<div class="visual">
|
||||
<div class="face" :style="[faceStyle()]"></div>
|
||||
<div class="face" :style="[faceStyle(), topFaceStyle()]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"></div>
|
||||
|
|
@ -132,7 +133,8 @@
|
|||
'wood-ceiling',
|
||||
'wood-panel',
|
||||
'uniform'
|
||||
]
|
||||
],
|
||||
visualMultiplier: 4
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
|
|
@ -140,10 +142,25 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
topFaceStyle() {
|
||||
let style = {
|
||||
transform: `rotateX(60deg) rotateZ(-45deg) translateZ(${this.app.cfg.audio.spatial_properties.room_dimensions.height * this.visualMultiplier}px)`
|
||||
}
|
||||
return style
|
||||
},
|
||||
faceStyle() {
|
||||
let style = {
|
||||
width: `${this.app.cfg.audio.spatial_properties.room_dimensions.width * this.visualMultiplier}px`,
|
||||
height: `${this.app.cfg.audio.spatial_properties.room_dimensions.depth * this.visualMultiplier}px`,
|
||||
}
|
||||
return style
|
||||
},
|
||||
setRoom() {
|
||||
window.CiderAudio.audioNodes.spatialNode.setRoomProperties(app.cfg.audio.spatial_properties.room_dimensions, app.cfg.audio.spatial_properties.room_materials);
|
||||
if(!this.app.cfg.audio.normalization) {
|
||||
window.CiderAudio.audioNodes.gainNode.gain.value = app.cfg.audio.spatial_properties.gain
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue