fix: lass rules moved up one level

Some rules were one level deeper and being created inside the btn rule
This commit is contained in:
Luis Pereira 2025-10-05 18:11:05 +01:00 committed by Brian O'Reilly
parent d0649a611e
commit d87c1be373
3 changed files with 241 additions and 240 deletions

View File

@ -312,14 +312,14 @@ body .btn .btn.active{
color: #000; color: #000;
} }
body .btn .playlist-controls{ body .playlist-controls{
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
} }
body .btn .playlist-input{ body .playlist-input{
flex: 1; flex: 1;
padding: 8px 12px; padding: 8px 12px;
background: #0a0a0a; background: #0a0a0a;
@ -328,20 +328,20 @@ body .btn .playlist-input{
font-family: Courier New, monospace; font-family: Courier New, monospace;
} }
body .btn .playlist-list{ body .playlist-list{
border: 1px solid #2a3441; border: 1px solid #2a3441;
background: #0a0a0a; background: #0a0a0a;
min-height: 100px; min-height: 100px;
padding: 10px; padding: 10px;
} }
body .btn .queue-controls{ body .queue-controls{
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
body .btn .play-queue{ body .play-queue{
border: 1px solid #2a3441; border: 1px solid #2a3441;
background: #0a0a0a; background: #0a0a0a;
min-height: 150px; min-height: 150px;
@ -350,7 +350,7 @@ body .btn .play-queue{
padding: 10px; padding: 10px;
} }
body .btn .queue-item{ body .queue-item{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -359,46 +359,46 @@ body .btn .queue-item{
margin-bottom: 5px; margin-bottom: 5px;
} }
body .btn .queue-item :last-child{ body .queue-item :last-child{
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
body .btn .empty-queue{ body .empty-queue{
text-align: center; text-align: center;
color: #666; color: #666;
padding: 20px; padding: 20px;
font-style: italic; font-style: italic;
} }
body .btn .no-tracks{ body .no-tracks{
text-align: center; text-align: center;
color: #666; color: #666;
padding: 20px; padding: 20px;
font-style: italic; font-style: italic;
} }
body .btn .no-playlists{ body .no-playlists{
text-align: center; text-align: center;
color: #666; color: #666;
padding: 20px; padding: 20px;
font-style: italic; font-style: italic;
} }
body .btn .loading{ body .loading{
text-align: center; text-align: center;
color: #4488ff; color: #4488ff;
padding: 20px; padding: 20px;
} }
body .btn .error{ body .error{
text-align: center; text-align: center;
color: #ff0000; color: #ff0000;
padding: 20px; padding: 20px;
font-weight: bold; font-weight: bold;
} }
body .btn .upload-section{ body .upload-section{
margin: 20px 0; margin: 20px 0;
padding: 20px; padding: 20px;
background: #0a0a0a; background: #0a0a0a;
@ -406,19 +406,19 @@ body .btn .upload-section{
border-radius: 5px; border-radius: 5px;
} }
body .btn .upload-controls{ body .upload-controls{
display: flex; display: flex;
gap: 15px; gap: 15px;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
} }
body .btn .upload-info{ body .upload-info{
color: #888; color: #888;
font-size: 0.9em; font-size: 0.9em;
} }
body .btn .upload-progress{ body .upload-progress{
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
background: #1a2332; background: #1a2332;
@ -426,7 +426,7 @@ body .btn .upload-progress{
border-radius: 3px; border-radius: 3px;
} }
body .btn .progress-bar{ body .progress-bar{
height: 20px; height: 20px;
background: #4488ff; background: #4488ff;
border-radius: 3px; border-radius: 3px;
@ -438,14 +438,14 @@ body .btn .progress-bar{
width: 0%; width: 0%;
} }
body .btn .progress-text{ body .progress-text{
display: block; display: block;
margin-top: 5px; margin-top: 5px;
color: #00ffff; color: #00ffff;
font-size: 0.9em; font-size: 0.9em;
} }
body .btn input{ body input{
padding: 8px 12px; padding: 8px 12px;
background: #1a2332; background: #1a2332;
color: #00ffff; color: #00ffff;
@ -454,7 +454,7 @@ body .btn input{
font-family: Courier New, monospace; font-family: Courier New, monospace;
} }
body .btn .upload-interface{ body .upload-interface{
margin-top: 2rem; margin-top: 2rem;
padding: 1.5rem; padding: 1.5rem;
background-color: #1a2332; background-color: #1a2332;
@ -462,12 +462,12 @@ body .btn .upload-interface{
border: 1px solid #2a3441; border: 1px solid #2a3441;
} }
body .btn .upload-interface h3{ body .upload-interface h3{
color: #00ffff; color: #00ffff;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
body .btn .upload-interface .upload-area{ body .upload-interface .upload-area{
border: 2px dashed #2a3441; border: 2px dashed #2a3441;
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
@ -480,26 +480,26 @@ body .btn .upload-interface .upload-area{
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
} }
body .btn .upload-interface .upload-area &:hover{ body .upload-interface .upload-area &:hover{
border-color: #00ffff; border-color: #00ffff;
} }
body .btn .upload-interface .upload-area .upload-icon{ body .upload-interface .upload-area .upload-icon{
font-size: 3rem; font-size: 3rem;
color: #666; color: #666;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
body .btn .upload-interface .upload-area p{ body .upload-interface .upload-area p{
color: #999; color: #999;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
body .btn .upload-interface .upload-area .btn{ body .upload-interface .upload-area .btn{
margin-top: 1rem; margin-top: 1rem;
} }
body .btn .auth-container{ body .auth-container{
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -507,7 +507,7 @@ body .btn .auth-container{
padding: 2rem; padding: 2rem;
} }
body .btn .auth-form{ body .auth-form{
background-color: #1a2332; background-color: #1a2332;
border: 1px solid #2a3441; border: 1px solid #2a3441;
border-radius: 8px; border-radius: 8px;
@ -521,31 +521,31 @@ body .btn .auth-form{
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
} }
body .btn .auth-form h2{ body .auth-form h2{
color: #00ffff; color: #00ffff;
text-align: center; text-align: center;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.5rem; font-size: 1.5rem;
} }
body .btn .auth-form h3{ body .auth-form h3{
color: #00ffff; color: #00ffff;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
body .btn .form-group{ body .form-group{
margin-bottom: 1rem; margin-bottom: 3rem;
} }
body .btn .form-group label{ body .form-group label{
display: block; display: block;
color: #ccc; color: #ccc;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-weight: bold; font-weight: bold;
} }
body .btn .form-group input{ body .form-group input{
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background-color: #0f0f0f; background-color: #0f0f0f;
@ -556,7 +556,7 @@ body .btn .form-group input{
box-sizing: border-box; box-sizing: border-box;
} }
body .btn .form-group input &:focus{ body .form-group input &:focus{
border-color: #00ffff; border-color: #00ffff;
outline: none; outline: none;
-moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
@ -566,13 +566,13 @@ body .btn .form-group input &:focus{
box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
} }
body .btn .form-actions{ body .form-actions{
display: flex; display: flex;
gap: 1rem; gap: 1rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
body .btn .message{ body .message{
padding: 0.75rem; padding: 0.75rem;
border-radius: 4px; border-radius: 4px;
margin-top: 1rem; margin-top: 1rem;
@ -580,40 +580,40 @@ body .btn .message{
font-weight: bold; font-weight: bold;
} }
body .btn .message &.success{ body .message &.success{
background-color: rgba(0, 255, 0, 0.1); background-color: rgba(0, 255, 0, 0.1);
border: 1px solid #00ffff; border: 1px solid #00ffff;
color: #00ffff; color: #00ffff;
} }
body .btn .message &.error{ body .message &.error{
background-color: rgba(255, 0, 0, 0.1); background-color: rgba(255, 0, 0, 0.1);
border: 1px solid #ff0000; border: 1px solid #ff0000;
color: #ff0000; color: #ff0000;
} }
body .btn .auth-link{ body .auth-link{
text-align: center; text-align: center;
margin-top: 1.5rem; margin-top: 1.5rem;
color: #999; color: #999;
} }
body .btn .auth-link a{ body .auth-link a{
color: #00ffff; color: #00ffff;
text-decoration: none; text-decoration: none;
} }
body .btn .auth-link a &:hover{ body .auth-link a &:hover{
text-decoration: underline; text-decoration: underline;
} }
body .btn .profile-container{ body .profile-container{
max-width: 600px; max-width: 600px;
margin: 2rem auto; margin: 2rem auto;
padding: 0 1rem; padding: 0 1rem;
} }
body .btn .profile-card{ body .profile-card{
background-color: #1a2332; background-color: #1a2332;
border: 1px solid #2a3441; border: 1px solid #2a3441;
border-radius: 8px; border-radius: 8px;
@ -621,17 +621,17 @@ body .btn .profile-card{
margin-bottom: 2rem; margin-bottom: 2rem;
} }
body .btn .profile-card h2{ body .profile-card h2{
color: #00ffff; color: #00ffff;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-align: center; text-align: center;
} }
body .btn .profile-info{ body .profile-info{
margin-bottom: 2rem; margin-bottom: 2rem;
} }
body .btn .info-group{ body .info-group{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -639,20 +639,20 @@ body .btn .info-group{
border-bottom: 1px solid #2a3441; border-bottom: 1px solid #2a3441;
} }
body .btn .info-group &:last-child{ body .info-group &:last-child{
border-bottom: none; border-bottom: none;
} }
body .btn .info-group label{ body .info-group label{
color: #ccc; color: #ccc;
font-weight: bold; font-weight: bold;
} }
body .btn .info-group span{ body .info-group span{
color: #fff; color: #fff;
} }
body .btn .role-badge{ body .role-badge{
background-color: #00ffff; background-color: #00ffff;
color: #000; color: #000;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
@ -661,17 +661,17 @@ body .btn .role-badge{
font-weight: bold; font-weight: bold;
} }
body .btn .profile-actions{ body .profile-actions{
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
} }
body .btn .user-management{ body .user-management{
margin-top: 2rem; margin-top: 2rem;
} }
body .btn .users-table{ body .users-table{
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background-color: #1a2332; background-color: #1a2332;
@ -680,11 +680,11 @@ body .btn .users-table{
overflow: hidden; overflow: hidden;
} }
body .btn .users-table thead{ body .users-table thead{
background-color: #0f0f0f; background-color: #0f0f0f;
} }
body .btn .users-table thead th{ body .users-table thead th{
padding: 1rem; padding: 1rem;
text-align: left; text-align: left;
color: #00ffff; color: #00ffff;
@ -694,38 +694,38 @@ body .btn .users-table thead th{
body .btn .users-table tbody tr{ body .users-table tbody tr{
border-bottom: 1px solid #2a3441; border-bottom: 1px solid #2a3441;
} }
body .btn .users-table tbody tr &:hover{ body .users-table tbody tr &:hover{
background-color: #222; background-color: #222;
} }
body .btn .users-table tbody tr td{ body .users-table tbody tr td{
padding: 1rem; padding: 1rem;
color: #fff; color: #fff;
vertical-align: middle; vertical-align: middle;
} }
body .btn .users-table tbody .user-actions{ body .users-table tbody .user-actions{
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
} }
body .btn .users-table tbody .user-actions .btn{ body .users-table tbody .user-actions .btn{
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
} }
body .btn .user-stats{ body .user-stats{
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
body .btn .stat-card{ body .stat-card{
background-color: #1a2332; background-color: #1a2332;
border: 1px solid #2a3441; border: 1px solid #2a3441;
border-radius: 8px; border-radius: 8px;
@ -733,14 +733,14 @@ body .btn .stat-card{
text-align: center; text-align: center;
} }
body .btn .stat-card .stat-number{ body .stat-card .stat-number{
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: #00ffff; color: #00ffff;
display: block; display: block;
} }
body .btn .stat-card .stat-label{ body .stat-card .stat-label{
color: #ccc; color: #ccc;
font-size: 0.875rem; font-size: 0.875rem;
margin-top: 0.5rem; margin-top: 0.5rem;

View File

@ -243,7 +243,7 @@
(.btn.active (.btn.active
:background "#4488ff" :background "#4488ff"
:border-color "#5599ff" :border-color "#5599ff"
:color "#000") :color "#000"))
;; Playlist and Queue styles ;; Playlist and Queue styles
(.playlist-controls (.playlist-controls
@ -421,7 +421,7 @@
:font-size 1.2rem)) :font-size 1.2rem))
(.form-group (.form-group
:margin-bottom 1rem :margin-bottom 3rem
(label :display block (label :display block
:color "#ccc" :color "#ccc"
@ -575,10 +575,11 @@
(.stat-label :color "#ccc" (.stat-label :color "#ccc"
:font-size 0.875rem :font-size 0.875rem
:margin-top 0.5rem))))) :margin-top 0.5rem))
;; Center alignment for player page ;; Center alignment for player page
;; (body.player-page ;; (body.player-page
;; :text-align center) ;; :text-align center)
;; Close main body block )) ;; Close main body block

View File

@ -30,8 +30,8 @@
</form> </form>
<div class="panel" style="margin-top: 20px; text-align: center;"> <div class="panel" style="margin-top: 20px; text-align: center;">
<strong style="color: #ff6600;">Default Admin Credentials:</strong><br> <strong style="color: #ff6600;">Default Admin Credentials:</strong><br>
Username: <code style="color: #00ff00;">admin</code><br> Username: <br><code style="color: #00ff00;">admin</code><br>
Password: <code style="color: #00ff00;">asteroid123</code> Password: <br><code style="color: #00ff00;">asteroid123</code>
</div> </div>
</div> </div>
</div> </div>