|
672 | 672 | background: rgba(0, 0, 0, 0.2); |
673 | 673 | } |
674 | 674 |
|
| 675 | + /* Expanded mode - show more tracks */ |
| 676 | + .audio-player-content.expanded { |
| 677 | + display: flex; |
| 678 | + flex-direction: column; |
| 679 | + height: 100%; |
| 680 | + } |
| 681 | +
|
| 682 | + .audio-player-content.expanded .playlist-section { |
| 683 | + flex: 1; |
| 684 | + display: flex; |
| 685 | + flex-direction: column; |
| 686 | + min-height: 0; |
| 687 | + overflow: hidden; |
| 688 | + } |
| 689 | +
|
| 690 | + .audio-player-content.expanded .audio-playlist { |
| 691 | + flex: 1; |
| 692 | + max-height: none !important; |
| 693 | + overflow-y: auto; |
| 694 | + } |
| 695 | +
|
675 | 696 | .audio-playlist::-webkit-scrollbar { |
676 | 697 | width: 6px; |
677 | 698 | } |
|
873 | 894 | } |
874 | 895 |
|
875 | 896 | .audio-player-sidebar { |
876 | | - display: none; |
| 897 | + display: none !important; |
| 898 | + } |
| 899 | +
|
| 900 | + .audio-player-main { |
| 901 | + height: 100%; |
| 902 | + max-height: 100%; |
| 903 | + overflow: hidden; |
877 | 904 | } |
878 | 905 |
|
879 | 906 | .audio-player-content { |
880 | 907 | padding: 1rem; |
881 | 908 | padding-top: 3rem; |
| 909 | + height: 100%; |
| 910 | + max-height: 100%; |
| 911 | + box-sizing: border-box; |
| 912 | + } |
| 913 | +
|
| 914 | + /* Avoid overlap with close button */ |
| 915 | + .current-playlist-badge { |
| 916 | + margin-right: 3rem; |
| 917 | + max-width: calc(100% - 3.5rem); |
882 | 918 | } |
883 | 919 |
|
884 | 920 | .album-art { |
|
917 | 953 |
|
918 | 954 | .audio-playlist { |
919 | 955 | max-height: 35vh; |
| 956 | + padding-bottom: 1rem; |
920 | 957 | } |
921 | 958 |
|
922 | 959 | .audio-volume-container { |
|
1005 | 1042 | margin-top: 0.5rem; |
1006 | 1043 | } |
1007 | 1044 |
|
1008 | | - .audio-player-content.expanded .audio-playlist { |
1009 | | - max-height: calc(100vh - 280px); |
| 1045 | + @@media (min-width: 769px) { |
| 1046 | + .audio-player-content.expanded { |
| 1047 | + overflow: hidden; |
| 1048 | + padding: 0.75rem; |
| 1049 | + } |
| 1050 | +
|
| 1051 | + .audio-player-content.expanded .compact-now-playing { |
| 1052 | + padding: 0.35rem 0.5rem; |
| 1053 | + margin-bottom: 0.35rem; |
| 1054 | + } |
| 1055 | +
|
| 1056 | + .audio-player-content.expanded .audio-controls { |
| 1057 | + padding: 0.5rem; |
| 1058 | + } |
| 1059 | +
|
| 1060 | + .audio-player-content.expanded .playlist-section { |
| 1061 | + display: flex; |
| 1062 | + flex-direction: column; |
| 1063 | + margin-top: 0.25rem; |
| 1064 | + } |
| 1065 | +
|
| 1066 | + .audio-player-content.expanded .queue-header-row { |
| 1067 | + flex-shrink: 0; |
| 1068 | + padding-bottom: 0.25rem; |
| 1069 | + } |
| 1070 | +
|
| 1071 | + .audio-player-content.expanded .audio-playlist { |
| 1072 | + flex: 1; |
| 1073 | + min-height: 0; |
| 1074 | + max-height: calc(90vh - 200px); |
| 1075 | + overflow-y: auto; |
| 1076 | + } |
| 1077 | +
|
| 1078 | + .audio-player-content.expanded .playlist-item { |
| 1079 | + padding: 0.4rem 0.5rem; |
| 1080 | + } |
1010 | 1081 | } |
1011 | 1082 |
|
1012 | 1083 | @@media (max-width: 768px) { |
| 1084 | + .audio-player-content.expanded { |
| 1085 | + overflow: hidden; |
| 1086 | + display: flex; |
| 1087 | + flex-direction: column; |
| 1088 | + } |
| 1089 | +
|
| 1090 | + .audio-player-content.expanded .compact-now-playing { |
| 1091 | + flex: 0 0 auto; |
| 1092 | + } |
| 1093 | +
|
| 1094 | + .audio-player-content.expanded .audio-controls { |
| 1095 | + flex: 0 0 auto; |
| 1096 | + } |
| 1097 | +
|
| 1098 | + .audio-player-content.expanded .playlist-section { |
| 1099 | + flex: 1 1 0; |
| 1100 | + min-height: 0; |
| 1101 | + display: flex; |
| 1102 | + flex-direction: column; |
| 1103 | + overflow: hidden; |
| 1104 | + } |
| 1105 | +
|
| 1106 | + .audio-player-content.expanded .queue-header-row { |
| 1107 | + flex: 0 0 auto; |
| 1108 | + margin-bottom: 0.5rem; |
| 1109 | + } |
| 1110 | +
|
1013 | 1111 | .audio-player-content.expanded .audio-playlist { |
1014 | | - max-height: calc(100vh - 220px); |
| 1112 | + flex: 1 1 0; |
| 1113 | + min-height: 0; |
| 1114 | + max-height: none; |
| 1115 | + overflow-y: auto; |
| 1116 | + -webkit-overflow-scrolling: touch; |
| 1117 | + padding-bottom: 1rem; |
1015 | 1118 | } |
1016 | 1119 | } |
1017 | 1120 |
|
|
0 commit comments