1708 lines
39 KiB
CSS
1708 lines
39 KiB
CSS
/* DJ System Professional Styling */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* DJ Interface Container */
|
|
#dj-interface {
|
|
width: 800px; /* Standard-Breite */
|
|
height: 600px; /* Standard-Höhe */
|
|
position: absolute;
|
|
top: 100%; /* Statt 50% - weiter unten */
|
|
left: 100%; /* Statt 50% - weiter rechts */
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
transition: opacity 0.3s ease;
|
|
min-width: 800px;
|
|
min-height: 600px;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
|
|
/* Header */
|
|
.dj-header {
|
|
height: 60px;
|
|
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
|
|
background: -webkit-linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
|
|
background: -moz-linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
|
|
background-size: 300% 300%;
|
|
animation: gradientShift 3s ease infinite;
|
|
-webkit-animation: gradientShift 3s ease infinite;
|
|
-moz-animation: gradientShift 3s ease infinite;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
cursor: move;
|
|
user-select: none;
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@-webkit-keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
@-moz-keyframes gradientShift {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif;
|
|
font-weight: 900;
|
|
font-size: 24px;
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.close-btn:hover {
|
|
background: rgba(255, 0, 0, 0.7);
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
}
|
|
|
|
/* Main DJ Console */
|
|
.dj-console {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 20px;
|
|
gap: 20px;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Decks */
|
|
.deck {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow:
|
|
inset 5px 5px 15px rgba(0, 0, 0, 0.5),
|
|
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
|
|
0 10px 30px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.deck-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.deck-header h3 {
|
|
font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif;
|
|
font-size: 18px;
|
|
color: #4ecdc4;
|
|
text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.deck-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-deck {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
box-shadow:
|
|
5px 5px 10px rgba(0, 0, 0, 0.3),
|
|
-5px -5px 10px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.btn-deck:hover {
|
|
transform: translateY(-2px);
|
|
-webkit-transform: translateY(-2px);
|
|
-moz-transform: translateY(-2px);
|
|
box-shadow:
|
|
7px 7px 15px rgba(0, 0, 0, 0.4),
|
|
-7px -7px 15px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.btn-deck:active {
|
|
transform: translateY(0);
|
|
-webkit-transform: translateY(0);
|
|
-moz-transform: translateY(0);
|
|
box-shadow:
|
|
inset 3px 3px 8px rgba(0, 0, 0, 0.3),
|
|
inset -3px -3px 8px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Vinyl Plattenspieler */
|
|
.turntable {
|
|
margin-bottom: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vinyl-container {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.vinyl {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, #1a1a1a 30%, #000000 70%);
|
|
background: -webkit-radial-gradient(circle, #1a1a1a 30%, #000000 70%);
|
|
background: -moz-radial-gradient(circle, #1a1a1a 30%, #000000 70%);
|
|
position: relative;
|
|
transition: transform 0.1s ease;
|
|
-webkit-transition: -webkit-transform 0.1s ease;
|
|
-moz-transition: -moz-transform 0.1s ease;
|
|
box-shadow:
|
|
0 0 30px rgba(0, 0, 0, 0.8),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.vinyl.spinning {
|
|
animation: spin 2s linear infinite;
|
|
-webkit-animation: spin 2s linear infinite;
|
|
-moz-animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@-webkit-keyframes spin {
|
|
from { -webkit-transform: rotate(0deg); }
|
|
to { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@-moz-keyframes spin {
|
|
from { -moz-transform: rotate(0deg); }
|
|
to { -moz-transform: rotate(360deg); }
|
|
}
|
|
|
|
.vinyl-center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #ff6b6b, #4ecdc4);
|
|
background: -webkit-linear-gradient(145deg, #ff6b6b, #4ecdc4);
|
|
background: -moz-linear-gradient(145deg, #ff6b6b, #4ecdc4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.vinyl-hole {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: #000000;
|
|
position: absolute;
|
|
}
|
|
|
|
.vinyl-label {
|
|
position: absolute;
|
|
width: 70px;
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.vinyl-grooves {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.groove {
|
|
position: absolute;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
-moz-transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.groove:nth-child(1) { width: 90%; height: 90%; }
|
|
.groove:nth-child(2) { width: 75%; height: 75%; }
|
|
.groove:nth-child(3) { width: 60%; height: 60%; }
|
|
.groove:nth-child(4) { width: 45%; height: 45%; }
|
|
.groove:nth-child(5) { width: 30%; height: 30%; }
|
|
|
|
/* Tonearm */
|
|
.tonearm {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.tonearm-base {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #c0c0c0, #808080);
|
|
background: -webkit-linear-gradient(145deg, #c0c0c0, #808080);
|
|
background: -moz-linear-gradient(145deg, #c0c0c0, #808080);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.tonearm-arm {
|
|
width: 60px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #c0c0c0, #808080);
|
|
background: -webkit-linear-gradient(90deg, #c0c0c0, #808080);
|
|
background: -moz-linear-gradient(90deg, #c0c0c0, #808080);
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 10px;
|
|
transform-origin: right center;
|
|
-webkit-transform-origin: right center;
|
|
-moz-transform-origin: right center;
|
|
transform: rotate(-30deg);
|
|
-webkit-transform: rotate(-30deg);
|
|
-moz-transform: rotate(-30deg);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.tonearm-needle {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #ffd700; /* Gold */
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 65px;
|
|
box-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
|
|
}
|
|
|
|
/* Turntable Controls */
|
|
.turntable-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
}
|
|
|
|
.play-btn {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -webkit-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -moz-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
color: #ffffff;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
box-shadow:
|
|
0 8px 20px rgba(78, 205, 196, 0.4),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.play-btn:hover {
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
box-shadow:
|
|
0 12px 30px rgba(78, 205, 196, 0.6),
|
|
inset 0 0 25px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.play-btn.playing {
|
|
background: linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -webkit-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -moz-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
box-shadow:
|
|
0 8px 20px rgba(255, 107, 107, 0.4),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.cue-btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: linear-gradient(145deg, #feca57, #ff9ff3);
|
|
background: -webkit-linear-gradient(145deg, #feca57, #ff9ff3);
|
|
background: -moz-linear-gradient(145deg, #feca57, #ff9ff3);
|
|
color: #000000;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.cue-btn:hover {
|
|
transform: translateY(-2px);
|
|
-webkit-transform: translateY(-2px);
|
|
-moz-transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(254, 202, 87, 0.4);
|
|
}
|
|
|
|
.pitch-slider {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.pitch-slider label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #4ecdc4;
|
|
}
|
|
|
|
.pitch-slider input[type="range"] {
|
|
width: 80px;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
|
|
background: -webkit-linear-gradient(90deg, #ff6b6b, #4ecdc4);
|
|
background: -moz-linear-gradient(90deg, #ff6b6b, #4ecdc4);
|
|
border-radius: 5px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.pitch-slider input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.pitch-slider input[type="range"]::-moz-range-thumb {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
border: none;
|
|
}
|
|
|
|
#pitch-value-a, #pitch-value-b {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Waveform */
|
|
.waveform-container {
|
|
position: relative;
|
|
height: 80px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10px;
|
|
margin-bottom: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.waveform-container canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.playhead {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: #ff6b6b;
|
|
box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
|
|
transition: left 0.1s ease;
|
|
-webkit-transition: left 0.1s ease;
|
|
-moz-transition: left 0.1s ease;
|
|
}
|
|
|
|
/* Track Info */
|
|
.track-info {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.track-title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #4ecdc4;
|
|
margin-bottom: 5px;
|
|
text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.track-artist {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.track-time {
|
|
font-size: 12px;
|
|
color: #888888;
|
|
font-family: 'Orbitron', 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
/* Mixer */
|
|
.mixer {
|
|
width: 400px;
|
|
min-width: 300px;
|
|
background: linear-gradient(145deg, #2a2a3e, #1e1e2e);
|
|
background: -webkit-linear-gradient(145deg, #2a2a3e, #1e1e2e);
|
|
background: -moz-linear-gradient(145deg, #2a2a3e, #1e1e2e);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
box-shadow:
|
|
inset 5px 5px 15px rgba(0, 0, 0, 0.5),
|
|
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
|
|
0 10px 30px rgba(0, 0, 0, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mixer-header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mixer-header h3 {
|
|
font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif;
|
|
font-size: 18px;
|
|
color: #ff6b6b;
|
|
text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
/* Crossfader Section */
|
|
.crossfader-section {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.crossfader-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.crossfader-container label {
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #4ecdc4;
|
|
text-shadow: 0 0 5px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
#crossfader {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
|
|
background: -webkit-linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
|
|
background: -moz-linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
|
|
border-radius: 10px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
#crossfader::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #ffffff, #cccccc);
|
|
background: -webkit-linear-gradient(145deg, #ffffff, #cccccc);
|
|
background: -moz-linear-gradient(145deg, #ffffff, #cccccc);
|
|
cursor: pointer;
|
|
box-shadow:
|
|
0 0 15px rgba(255, 255, 255, 0.8),
|
|
inset 2px 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#crossfader::-moz-range-thumb {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #ffffff, #cccccc);
|
|
background: -moz-linear-gradient(145deg, #ffffff, #cccccc);
|
|
cursor: pointer;
|
|
box-shadow:
|
|
0 0 15px rgba(255, 255, 255, 0.8),
|
|
inset 2px 2px 5px rgba(0, 0, 0, 0.2);
|
|
border: none;
|
|
}
|
|
|
|
.crossfader-curve {
|
|
display: flex;
|
|
gap: 5px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.curve-btn {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.curve-btn.active {
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -webkit-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -moz-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
box-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
/* Channel Controls */
|
|
.channel-controls {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.channel {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.master-section {
|
|
width: 80px;
|
|
background: linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.channel-header, .master-header {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* EQ Section */
|
|
.eq-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.eq-knob {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.eq-knob label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #888888;
|
|
}
|
|
|
|
.knob {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
position: relative;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
inset 3px 3px 8px rgba(0, 0, 0, 0.3),
|
|
inset -3px -3px 8px rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.knob:hover {
|
|
box-shadow:
|
|
inset 4px 4px 10px rgba(0, 0, 0, 0.4),
|
|
inset -4px -4px 10px rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.knob-indicator {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
-webkit-transform: translateX(-50%);
|
|
-moz-transform: translateX(-50%);
|
|
width: 3px;
|
|
height: 15px;
|
|
background: #4ecdc4;
|
|
border-radius: 2px;
|
|
box-shadow: 0 0 8px rgba(78, 205, 196, 0.8);
|
|
transform-origin: center 17px;
|
|
-webkit-transform-origin: center 17px;
|
|
-moz-transform-origin: center 17px;
|
|
}
|
|
|
|
.eq-value {
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
font-family: 'Orbitron', 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
/* Volume Faders */
|
|
.volume-fader, .master-volume {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.volume-fader input[type="range"], .master-volume input[type="range"] {
|
|
writing-mode: bt-lr; /* IE */
|
|
-webkit-appearance: slider-vertical; /* WebKit */
|
|
appearance: slider-vertical;
|
|
width: 8px;
|
|
height: 150px;
|
|
background: linear-gradient(180deg, #ff6b6b, #feca57, #4ecdc4);
|
|
background: -webkit-linear-gradient(180deg, #ff6b6b, #feca57, #4ecdc4);
|
|
background: -moz-linear-gradient(180deg, #ff6b6b, #feca57, #4ecdc4);
|
|
border-radius: 5px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Firefox-spezifische Korrekturen für vertikale Slider */
|
|
@supports (-moz-appearance:none) {
|
|
.volume-fader input[type="range"], .master-volume input[type="range"] {
|
|
transform: rotate(270deg);
|
|
-moz-transform: rotate(270deg);
|
|
margin: 60px 0;
|
|
width: 150px;
|
|
}
|
|
}
|
|
|
|
.volume-fader input[type="range"]::-webkit-slider-thumb,
|
|
.master-volume input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 20px;
|
|
height: 15px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(145deg, #ffffff, #cccccc);
|
|
background: -webkit-linear-gradient(145deg, #ffffff, #cccccc);
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.volume-fader input[type="range"]::-moz-range-thumb,
|
|
.master-volume input[type="range"]::-moz-range-thumb {
|
|
width: 20px;
|
|
height: 15px;
|
|
border-radius: 3px;
|
|
background: linear-gradient(145deg, #ffffff, #cccccc);
|
|
background: -moz-linear-gradient(145deg, #ffffff, #cccccc);
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
border: none;
|
|
}
|
|
|
|
.volume-fader label, .master-volume label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: #888888;
|
|
writing-mode: vertical-rl;
|
|
-webkit-writing-mode: vertical-rl;
|
|
-ms-writing-mode: tb-rl;
|
|
text-orientation: mixed;
|
|
-webkit-text-orientation: mixed;
|
|
}
|
|
|
|
/* VU Meters */
|
|
.vu-meter, .master-vu {
|
|
width: 20px;
|
|
height: 150px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vu-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0%;
|
|
background: linear-gradient(180deg, #ff0000, #ff6b6b, #feca57, #4ecdc4);
|
|
background: -webkit-linear-gradient(180deg, #ff0000, #ff6b6b, #feca57, #4ecdc4);
|
|
background: -moz-linear-gradient(180deg, #ff0000, #ff6b6b, #feca57, #4ecdc4);
|
|
border-radius: 10px;
|
|
transition: height 0.1s ease;
|
|
-webkit-transition: height 0.1s ease;
|
|
-moz-transition: height 0.1s ease;
|
|
}
|
|
|
|
/* BPM Display */
|
|
.bpm-display {
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.bpm-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #4ecdc4;
|
|
font-family: 'Orbitron', 'Courier New', Courier, monospace;
|
|
text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.bpm-display label {
|
|
font-size: 12px;
|
|
color: #888888;
|
|
}
|
|
|
|
/* Effects Section */
|
|
.effects-section {
|
|
background: linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.effect-unit h4 {
|
|
text-align: center;
|
|
color: #ff6b6b;
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.effect-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.effect-btn {
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #3a3a4e, #2a2a3e);
|
|
color: #ffffff;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.effect-btn:hover {
|
|
transform: translateY(-1px);
|
|
-webkit-transform: translateY(-1px);
|
|
-moz-transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.effect-btn.active {
|
|
background: linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -webkit-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -moz-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.effect-knob {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
/* Bottom Panel */
|
|
.bottom-panel {
|
|
height: 200px;
|
|
background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
border-top: 2px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
padding: 15px;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* Playlist Browser */
|
|
.playlist-browser {
|
|
flex: 1;
|
|
background: linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
background: -webkit-linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
background: -moz-linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.browser-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.browser-header h4 {
|
|
color: #4ecdc4;
|
|
font-size: 14px;
|
|
text-shadow: 0 0 5px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.search-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
left: 10px;
|
|
color: #888888;
|
|
}
|
|
|
|
.search-box input {
|
|
padding: 8px 15px 8px 35px;
|
|
border: none;
|
|
border-radius: 20px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
outline: none;
|
|
width: 200px;
|
|
}
|
|
|
|
.search-box input::placeholder {
|
|
color: #888888;
|
|
}
|
|
|
|
.track-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #4ecdc4 transparent;
|
|
}
|
|
|
|
.track-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.track-list::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.track-list::-webkit-scrollbar-thumb {
|
|
background: #4ecdc4;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.track-item {
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
margin-bottom: 5px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.track-item:hover {
|
|
background: rgba(78, 205, 196, 0.1);
|
|
border-color: rgba(78, 205, 196, 0.3);
|
|
}
|
|
|
|
.track-item-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.track-item-artist {
|
|
font-size: 10px;
|
|
color: #888888;
|
|
}
|
|
|
|
/* Recording Section */
|
|
.recording-section {
|
|
width: 150px;
|
|
background: linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
background: -webkit-linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
background: -moz-linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.recording-section h4 {
|
|
color: #ff6b6b;
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
|
|
}
|
|
|
|
.record-btn {
|
|
width: 60px;
|
|
height: 60px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -webkit-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
background: -moz-linear-gradient(145deg, #ff6b6b, #ff5722);
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
|
|
}
|
|
|
|
.record-btn:hover {
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
box-shadow: 0 12px 30px rgba(255, 107, 107, 0.6);
|
|
}
|
|
|
|
.record-btn.recording {
|
|
animation: recordPulse 1s ease-in-out infinite;
|
|
-webkit-animation: recordPulse 1s ease-in-out infinite;
|
|
-moz-animation: recordPulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes recordPulse {
|
|
0%, 100% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4); }
|
|
50% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.8); }
|
|
}
|
|
|
|
@-webkit-keyframes recordPulse {
|
|
0%, 100% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4); }
|
|
50% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.8); }
|
|
}
|
|
|
|
@-moz-keyframes recordPulse {
|
|
0%, 100% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4); }
|
|
50% { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.8); }
|
|
}
|
|
|
|
.recording-time {
|
|
font-family: 'Orbitron', 'Courier New', Courier, monospace;
|
|
font-size: 16px;
|
|
color: #4ecdc4;
|
|
text-shadow: 0 0 5px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
border-radius: 20px;
|
|
padding: 30px;
|
|
width: 500px;
|
|
max-width: 90vw;
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
color: #4ecdc4;
|
|
font-size: 20px;
|
|
text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.close-modal {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(255, 0, 0, 0.7);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.close-modal:hover {
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
-moz-transform: scale(1.1);
|
|
background: rgba(255, 0, 0, 0.9);
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-group label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 12px 15px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
outline: none;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.input-group input:focus {
|
|
border-color: #4ecdc4;
|
|
box-shadow: 0 0 15px rgba(78, 205, 196, 0.3);
|
|
}
|
|
|
|
.input-group input::placeholder {
|
|
color: #888888;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: flex-end;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.btn-cancel, .btn-load {
|
|
padding: 12px 25px;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
-webkit-transition: all 0.3s ease;
|
|
-moz-transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: linear-gradient(145deg, #666666, #555555);
|
|
background: -webkit-linear-gradient(145deg, #666666, #555555);
|
|
background: -moz-linear-gradient(145deg, #666666, #555555);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
transform: translateY(-2px);
|
|
-webkit-transform: translateY(-2px);
|
|
-moz-transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.btn-load {
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -webkit-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
background: -moz-linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-load:hover {
|
|
transform: translateY(-2px);
|
|
-webkit-transform: translateY(-2px);
|
|
-moz-transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4);
|
|
}
|
|
|
|
/* Notification */
|
|
.notification {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 20px;
|
|
padding: 15px 20px;
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-weight: 600;
|
|
z-index: 10000;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.notification-success {
|
|
background: #4ecdc4;
|
|
}
|
|
|
|
.notification-error {
|
|
background: #ff6b6b;
|
|
}
|
|
|
|
.notification-warning {
|
|
background: #feca57;
|
|
}
|
|
|
|
.notification-info {
|
|
background: #45b7d1;
|
|
}
|
|
|
|
/* Resize Handle */
|
|
.resize-handle {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: nwse-resize;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.resize-handle:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
/* Animation für Ein- und Ausblenden */
|
|
#dj-interface.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#dj-interface:not(.hidden) {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 1200px) {
|
|
.dj-console {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
.mixer {
|
|
width: 100%;
|
|
}
|
|
|
|
.deck {
|
|
width: 100%;
|
|
}
|
|
|
|
.vinyl-container {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.vinyl {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
|
|
.bottom-panel {
|
|
flex-direction: column;
|
|
height: auto;
|
|
}
|
|
|
|
.recording-section {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#dj-interface {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.dj-header {
|
|
height: 50px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.turntable-controls {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.channel-controls {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.master-section {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.master-volume {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.master-volume input[type="range"]::-moz-range-thumb {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
|
|
50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
|
|
}
|
|
|
|
@-webkit-keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
|
|
50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
|
|
}
|
|
|
|
@-moz-keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
|
|
50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
|
|
}
|
|
|
|
.glowing {
|
|
animation: glow 2s ease-in-out infinite;
|
|
-webkit-animation: glow 2s ease-in-out infinite;
|
|
-moz-animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-right { text-align: right; }
|
|
|
|
.mb-10 { margin-bottom: 10px; }
|
|
.mb-15 { margin-bottom: 15px; }
|
|
.mb-20 { margin-bottom: 20px; }
|
|
|
|
.p-10 { padding: 10px; }
|
|
.p-15 { padding: 15px; }
|
|
.p-20 { padding: 20px; }
|
|
|
|
/* Playlist Styles */
|
|
.playlist-browser {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(145deg, #0f0f23, #1a1a2e);
|
|
border-radius: 15px;
|
|
padding: 15px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.browser-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.create-playlist-btn {
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
color: #ffffff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.create-playlist-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
|
|
}
|
|
|
|
.playlist-container {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #4ecdc4 transparent;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.playlist-container::-webkit-scrollbar-thumb {
|
|
background: #4ecdc4;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.playlist-item {
|
|
padding: 10px;
|
|
margin-bottom: 8px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.playlist-item:hover {
|
|
background: rgba(78, 205, 196, 0.1);
|
|
border-color: rgba(78, 205, 196, 0.3);
|
|
}
|
|
|
|
.playlist-item.active {
|
|
background: rgba(78, 205, 196, 0.2);
|
|
border-color: rgba(78, 205, 196, 0.5);
|
|
}
|
|
|
|
.playlist-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.playlist-name {
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.playlist-count {
|
|
font-size: 12px;
|
|
color: #888888;
|
|
}
|
|
|
|
.playlist-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.playlist-actions button {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.playlist-play-btn {
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1) !important;
|
|
}
|
|
|
|
.playlist-edit-btn {
|
|
background: linear-gradient(145deg, #feca57, #ff9ff3) !important;
|
|
}
|
|
|
|
.playlist-delete-btn {
|
|
background: linear-gradient(145deg, #ff6b6b, #ff5722) !important;
|
|
}
|
|
|
|
.playlist-actions button:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.no-playlists {
|
|
text-align: center;
|
|
color: #888888;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Playlist Editor Modal */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.modal-content {
|
|
background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
width: 500px;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.modal-header h3 {
|
|
color: #4ecdc4;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.close-modal {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(255, 0, 0, 0.7);
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.close-modal:hover {
|
|
background: rgba(255, 0, 0, 0.9);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.playlist-songs {
|
|
margin-bottom: 20px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.playlist-song {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px;
|
|
margin-bottom: 5px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.remove-song {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
border-radius: 50%;
|
|
background: rgba(255, 0, 0, 0.7);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-song-form {
|
|
padding: 15px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.add-song-form h4 {
|
|
margin-bottom: 10px;
|
|
color: #4ecdc4;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
outline: none;
|
|
}
|
|
|
|
#add-song-btn {
|
|
padding: 8px 15px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
background: linear-gradient(145deg, #4ecdc4, #45b7d1);
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#add-song-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
|
|
}
|