Max/Main
1
0
Fork 0
forked from Simnation/Main
Code Pull requests Activity

Update style.css

Browse source
This commit is contained in:
Nordi98 2025-08-03 18:13:00 +02:00
parent 8011bd1e8f
commit c2ba128523
1 changed files with 145 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

281
resources/[tools]/nordi_dj/html/style.css
View file

@ -22,18 +22,25 @@ body {
/* DJ Interface Container */ /* DJ Interface Container */
#dj-interface { #dj-interface {
width: 100vw; width: 1000px; /* Standard-Breite */
height: 100vh; height: 700px; /* Standard-Höhe */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%); background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
background: -webkit-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%); background: -webkit-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
background: -moz-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%); background: -moz-linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
position: relative; 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 */ /* Header */
@ -47,16 +54,12 @@ body {
-webkit-animation: gradientShift 3s ease infinite; -webkit-animation: gradientShift 3s ease infinite;
-moz-animation: gradientShift 3s ease infinite; -moz-animation: gradientShift 3s ease infinite;
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
padding: 0 20px; padding: 0 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
cursor: move;
user-select: none;
} }
@keyframes gradientShift { @keyframes gradientShift {
@ -79,11 +82,7 @@ body {
.logo { .logo {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 10px; gap: 10px;
font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif; font-family: 'Orbitron', 'Arial Black', Gadget, sans-serif;
font-weight: 900; font-weight: 900;
@ -93,18 +92,12 @@ body {
.status-bar { .status-bar {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
gap: 20px; gap: 20px;
} }
.status-item { .status-item {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 5px; gap: 5px;
font-weight: 600; font-weight: 600;
} }
@ -115,14 +108,8 @@ body {
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
-webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
@ -139,21 +126,16 @@ body {
/* Main DJ Console */ /* Main DJ Console */
.dj-console { .dj-console {
flex: 1; flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
padding: 20px; padding: 20px;
gap: 20px; gap: 20px;
min-height: 0; min-height: 0;
overflow: auto;
} }
/* Decks */ /* Decks */
.deck { .deck {
flex: 1; flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
background: linear-gradient(145deg, #1e1e2e, #2a2a3e); background: linear-gradient(145deg, #1e1e2e, #2a2a3e);
background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e); background: -webkit-linear-gradient(145deg, #1e1e2e, #2a2a3e);
background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e); background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
@ -164,18 +146,14 @@ body {
inset -5px -5px 15px rgba(255, 255, 255, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.1),
0 10px 30px rgba(0, 0, 0, 0.3); 0 10px 30px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
} }
.deck-header { .deck-header {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1); border-bottom: 2px solid rgba(255, 255, 255, 0.1);
@ -190,8 +168,6 @@ body {
.deck-controls { .deck-controls {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
gap: 10px; gap: 10px;
} }
@ -234,6 +210,7 @@ body {
/* Vinyl Plattenspieler */ /* Vinyl Plattenspieler */
.turntable { .turntable {
margin-bottom: 20px; margin-bottom: 20px;
flex-shrink: 0;
} }
.vinyl-container { .vinyl-container {
@ -294,14 +271,8 @@ body {
background: -webkit-linear-gradient(145deg, #ff6b6b, #4ecdc4); background: -webkit-linear-gradient(145deg, #ff6b6b, #4ecdc4);
background: -moz-linear-gradient(145deg, #ff6b6b, #4ecdc4); background: -moz-linear-gradient(145deg, #ff6b6b, #4ecdc4);
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
box-shadow: 0 0 20px rgba(255, 107, 107, 0.5); box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
} }
@ -318,14 +289,8 @@ body {
width: 70px; width: 70px;
height: 70px; height: 70px;
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
text-align: center; text-align: center;
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
@ -412,14 +377,8 @@ body {
/* Turntable Controls */ /* Turntable Controls */
.turntable-controls { .turntable-controls {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
gap: 15px; gap: 15px;
} }
@ -484,14 +443,8 @@ body {
.pitch-slider { .pitch-slider {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 5px; gap: 5px;
} }
@ -572,6 +525,7 @@ body {
/* Track Info */ /* Track Info */
.track-info { .track-info {
text-align: center; text-align: center;
margin-bottom: 10px;
} }
.track-title { .track-title {
@ -597,6 +551,7 @@ body {
/* Mixer */ /* Mixer */
.mixer { .mixer {
width: 400px; width: 400px;
min-width: 300px;
background: linear-gradient(145deg, #2a2a3e, #1e1e2e); background: linear-gradient(145deg, #2a2a3e, #1e1e2e);
background: -webkit-linear-gradient(145deg, #2a2a3e, #1e1e2e); background: -webkit-linear-gradient(145deg, #2a2a3e, #1e1e2e);
background: -moz-linear-gradient(145deg, #2a2a3e, #1e1e2e); background: -moz-linear-gradient(145deg, #2a2a3e, #1e1e2e);
@ -607,6 +562,8 @@ body {
inset -5px -5px 15px rgba(255, 255, 255, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.1),
0 10px 30px rgba(0, 0, 0, 0.3); 0 10px 30px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
} }
.mixer-header { .mixer-header {
@ -630,11 +587,7 @@ body {
.crossfader-container { .crossfader-container {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 15px; gap: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -648,8 +601,6 @@ body {
#crossfader { #crossfader {
flex: 1; flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
height: 8px; height: 8px;
background: linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4); background: linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
background: -webkit-linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4); background: -webkit-linear-gradient(90deg, #4ecdc4, #ff6b6b, #4ecdc4);
@ -691,12 +642,8 @@ body {
.crossfader-curve { .crossfader-curve {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
gap: 5px; gap: 5px;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
} }
.curve-btn { .curve-btn {
@ -725,16 +672,12 @@ body {
/* Channel Controls */ /* Channel Controls */
.channel-controls { .channel-controls {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
gap: 20px; gap: 20px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.channel { .channel {
flex: 1; flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
background: linear-gradient(145deg, #1a1a2e, #0f0f23); background: linear-gradient(145deg, #1a1a2e, #0f0f23);
background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23); background: -webkit-linear-gradient(145deg, #1a1a2e, #0f0f23);
background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23); background: -moz-linear-gradient(145deg, #1a1a2e, #0f0f23);
@ -764,25 +707,15 @@ body {
/* EQ Section */ /* EQ Section */
.eq-section { .eq-section {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
gap: 15px; gap: 15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.eq-knob { .eq-knob {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 5px; gap: 5px;
} }
@ -841,14 +774,8 @@ body {
/* Volume Faders */ /* Volume Faders */
.volume-fader, .master-volume { .volume-fader, .master-volume {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 10px; gap: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@ -1016,14 +943,8 @@ body {
.effect-knob { .effect-knob {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
gap: 5px; gap: 5px;
} }
@ -1035,8 +956,6 @@ body {
background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e); background: -moz-linear-gradient(145deg, #1e1e2e, #2a2a3e);
border-top: 2px solid rgba(255, 255, 255, 0.1); border-top: 2px solid rgba(255, 255, 255, 0.1);
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
padding: 15px; padding: 15px;
gap: 20px; gap: 20px;
} }
@ -1044,26 +963,20 @@ body {
/* Playlist Browser */ /* Playlist Browser */
.playlist-browser { .playlist-browser {
flex: 1; flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
background: linear-gradient(145deg, #0f0f23, #1a1a2e); background: linear-gradient(145deg, #0f0f23, #1a1a2e);
background: -webkit-linear-gradient(145deg, #0f0f23, #1a1a2e); background: -webkit-linear-gradient(145deg, #0f0f23, #1a1a2e);
background: -moz-linear-gradient(145deg, #0f0f23, #1a1a2e); background: -moz-linear-gradient(145deg, #0f0f23, #1a1a2e);
border-radius: 15px; border-radius: 15px;
padding: 15px; padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
} }
.browser-header { .browser-header {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
margin-bottom: 15px; margin-bottom: 15px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@ -1078,11 +991,7 @@ body {
.search-box { .search-box {
position: relative; position: relative;
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
} }
.search-box i { .search-box i {
@ -1107,7 +1016,7 @@ body {
} }
.track-list { .track-list {
height: 120px; flex: 1;
overflow-y: auto; overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #4ecdc4 transparent; scrollbar-color: #4ecdc4 transparent;
@ -1235,14 +1144,8 @@ body {
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
justify-content: center; justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
z-index: 1000; z-index: 1000;
} }
@ -1260,14 +1163,8 @@ body {
.modal-header { .modal-header {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between; justify-content: space-between;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
align-items: center; align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1); border-bottom: 2px solid rgba(255, 255, 255, 0.1);
@ -1336,12 +1233,8 @@ body {
.modal-actions { .modal-actions {
display: flex; display: flex;
display: -webkit-flex;
display: -ms-flexbox;
gap: 15px; gap: 15px;
justify-content: flex-end; justify-content: flex-end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
margin-top: 30px; margin-top: 30px;
} }
@ -1384,12 +1277,72 @@ body {
box-shadow: 0 8px 20px rgba(78, 205, 196, 0.4); 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 */ /* Responsive Design */
@media (max-width: 1200px) { @media (max-width: 1200px) {
.dj-console { .dj-console {
flex-direction: column; flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
gap: 15px; gap: 15px;
} }
@ -1410,6 +1363,61 @@ body {
width: 150px; width: 150px;
height: 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 */ /* Animations */
@ -1446,3 +1454,4 @@ body {
.p-10 { padding: 10px; } .p-10 { padding: 10px; }
.p-15 { padding: 15px; } .p-15 { padding: 15px; }
.p-20 { padding: 20px; } .p-20 { padding: 20px; }