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