fix: pseudo selectors on lass are now working
This commit is contained in:
Luis Pereira
Brian O'Reilly
parent
d87c1be373
commit
82071bb18d
|
|
@ -8,6 +8,7 @@ body{
|
||||||
color: #00ffff;
|
color: #00ffff;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
box-sizing: boder-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .container{
|
body .container{
|
||||||
|
|
@ -47,14 +48,19 @@ body .nav{
|
||||||
body .nav a{
|
body .nav a{
|
||||||
color: #00ffff;
|
color: #00ffff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin: 0 15px;
|
margin: 0 10px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: 1px solid #2a3441;
|
border: 1px solid #2a3441;
|
||||||
background: #1a2332;
|
background: #1a2332;
|
||||||
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .nav a :hover{
|
body .nav a:first-child{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .nav a:hover{
|
||||||
background: #2a3441;
|
background: #2a3441;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -71,7 +77,7 @@ body .controls button{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .controls button :hover{
|
body .controls button:hover{
|
||||||
background: #2a3441;
|
background: #2a3441;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -84,7 +90,7 @@ body button{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
body button :hover{
|
body button:hover{
|
||||||
background: #3a4551;
|
background: #3a4551;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -95,6 +101,7 @@ body .now-playing{
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
color: #4488ff;
|
color: #4488ff;
|
||||||
|
overflow: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .back{
|
body .back{
|
||||||
|
|
@ -104,7 +111,7 @@ body .back{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .back :hover{
|
body .back:hover{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -132,6 +139,27 @@ body .player-section{
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body .player-section .live-stream{
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body .live-stream .live-stream-quality label,
|
||||||
|
body .live-stream .live-stream-quality select{
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .live-stream .live-stream-quality label{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .live-stream .live-stream-quality select{
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
body .track-browser{
|
body .track-browser{
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
@ -145,6 +173,12 @@ body .search-input{
|
||||||
font-family: Courier New, monospace;
|
font-family: Courier New, monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .sort-select{
|
||||||
|
padding: 0.25rem;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .track-list{
|
body .track-list{
|
||||||
|
|
@ -167,10 +201,6 @@ body .track-item{
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .track-item :hover{
|
|
||||||
background: #1a2332;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .track-info{
|
body .track-info{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -278,17 +308,19 @@ body .btn{
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .btn :hover{
|
body .btn:hover{
|
||||||
background: #3a4551;
|
background: #3a4551;
|
||||||
border-color: #3a4551;
|
border-color: #3a4551;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body .btn .btn-primary{
|
body .btn .btn-primary{
|
||||||
background: #0066cc;
|
background: #0066cc;
|
||||||
border-color: #0088ff;
|
border-color: #0088ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .btn .btn-primary :hover{
|
body .btn .btn-primary:hover{
|
||||||
background: #0088ff;
|
background: #0088ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -297,7 +329,7 @@ body .btn .btn-secondary{
|
||||||
border-color: #2a3441;
|
border-color: #2a3441;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .btn .btn-secondary :hover{
|
body .btn .btn-secondary:hover{
|
||||||
background: #666;
|
background: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -359,7 +391,7 @@ body .queue-item{
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .queue-item :last-child{
|
body .queue-item:last-child{
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -480,10 +512,6 @@ body .upload-interface .upload-area{
|
||||||
transition: border-color 0.3s ease;
|
transition: border-color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .upload-interface .upload-area &:hover{
|
|
||||||
border-color: #00ffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .upload-interface .upload-area .upload-icon{
|
body .upload-interface .upload-area .upload-icon{
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|
@ -499,6 +527,10 @@ body .upload-interface .upload-area .btn{
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body .upload-interface .upload-area:hover{
|
||||||
|
border-color: #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
body .auth-container{
|
body .auth-container{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -556,7 +588,7 @@ body .form-group input{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .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);
|
||||||
|
|
@ -580,13 +612,13 @@ body .message{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .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 .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;
|
||||||
|
|
@ -603,7 +635,7 @@ body .auth-link a{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .auth-link a &:hover{
|
body .auth-link a:hover{
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -639,10 +671,6 @@ body .info-group{
|
||||||
border-bottom: 1px solid #2a3441;
|
border-bottom: 1px solid #2a3441;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .info-group &:last-child{
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .info-group label{
|
body .info-group label{
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -652,6 +680,10 @@ body .info-group span{
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body .info-group:last-child{
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
body .role-badge{
|
body .role-badge{
|
||||||
background-color: #00ffff;
|
background-color: #00ffff;
|
||||||
color: #000;
|
color: #000;
|
||||||
|
|
@ -698,16 +730,16 @@ body .users-table tbody tr{
|
||||||
border-bottom: 1px solid #2a3441;
|
border-bottom: 1px solid #2a3441;
|
||||||
}
|
}
|
||||||
|
|
||||||
body .users-table tbody tr &:hover{
|
|
||||||
background-color: #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .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 .users-table tbody tr:hover{
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
body .users-table tbody .user-actions{
|
body .users-table tbody .user-actions{
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:margin 0
|
:margin 0
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
|
:box-sizing "boder-box"
|
||||||
|
|
||||||
(.container
|
(.container
|
||||||
:max-width "1200px"
|
:max-width "1200px"
|
||||||
|
|
@ -43,13 +44,18 @@
|
||||||
(a
|
(a
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:text-decoration none
|
:text-decoration none
|
||||||
:margin "0 15px"
|
:margin "0 10px"
|
||||||
:padding "10px 20px"
|
:padding "10px 20px"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:background "#1a2332"
|
:background "#1a2332"
|
||||||
:display inline-block
|
:cursor pointer
|
||||||
(:hover
|
:display inline-block)
|
||||||
:background "#2a3441")))
|
|
||||||
|
((:and a :first-child)
|
||||||
|
:margin-left "0")
|
||||||
|
|
||||||
|
((:and a :hover)
|
||||||
|
:background "#2a3441"))
|
||||||
|
|
||||||
(.controls
|
(.controls
|
||||||
:margin "20px 0"
|
:margin "20px 0"
|
||||||
|
|
@ -59,9 +65,9 @@
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:padding "10px 20px"
|
:padding "10px 20px"
|
||||||
:margin "5px"
|
:margin "5px"
|
||||||
:cursor pointer
|
:cursor pointer)
|
||||||
(:hover
|
((:and button :hover)
|
||||||
:background "#2a3441")))
|
:background "#2a3441"))
|
||||||
|
|
||||||
(button
|
(button
|
||||||
:background "#2a3441"
|
:background "#2a3441"
|
||||||
|
|
@ -69,9 +75,10 @@
|
||||||
:border "1px solid #3a4551"
|
:border "1px solid #3a4551"
|
||||||
:padding "10px 20px"
|
:padding "10px 20px"
|
||||||
:margin "5px"
|
:margin "5px"
|
||||||
:cursor pointer
|
:cursor pointer)
|
||||||
(:hover
|
|
||||||
:background "#3a4551"))
|
((:and button :hover)
|
||||||
|
:background "#3a4551")
|
||||||
|
|
||||||
(.now-playing
|
(.now-playing
|
||||||
:background "#1a2332"
|
:background "#1a2332"
|
||||||
|
|
@ -79,15 +86,16 @@
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:margin "20px 0"
|
:margin "20px 0"
|
||||||
:font-size "1.5em"
|
:font-size "1.5em"
|
||||||
:color "#4488ff")
|
:color "#4488ff"
|
||||||
|
:overflow "scroll")
|
||||||
|
|
||||||
(.back
|
(.back
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:text-decoration none
|
:text-decoration none
|
||||||
:margin-bottom "20px"
|
:margin-bottom "20px"
|
||||||
:display inline-block
|
:display inline-block)
|
||||||
(:hover
|
((:and .back :hover)
|
||||||
:text-decoration underline))
|
:text-decoration underline)
|
||||||
|
|
||||||
;; Player-specific styles
|
;; Player-specific styles
|
||||||
(.player
|
(.player
|
||||||
|
|
@ -108,7 +116,20 @@
|
||||||
:padding "25px"
|
:padding "25px"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:margin "20px 0"
|
:margin "20px 0"
|
||||||
:border-radius "5px")
|
:border-radius "5px"
|
||||||
|
(.live-stream
|
||||||
|
:overflow "scroll") )
|
||||||
|
|
||||||
|
(.live-stream
|
||||||
|
(.live-stream-quality
|
||||||
|
|
||||||
|
((:or label select) :margin "10px 0")
|
||||||
|
|
||||||
|
(label
|
||||||
|
:margin-right "10px")
|
||||||
|
|
||||||
|
(select
|
||||||
|
:padding "5px")))
|
||||||
|
|
||||||
(.track-browser
|
(.track-browser
|
||||||
:margin "15px 0")
|
:margin "15px 0")
|
||||||
|
|
@ -121,7 +142,12 @@
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:font-family "Courier New, monospace"
|
:font-family "Courier New, monospace"
|
||||||
:font-size "14px"
|
:font-size "14px"
|
||||||
:margin-bottom "15px")
|
:margin-bottom "15px"
|
||||||
|
:box-sizing "border-box")
|
||||||
|
|
||||||
|
(.sort-select
|
||||||
|
:padding "0.25rem"
|
||||||
|
:margin-right "10px")
|
||||||
|
|
||||||
(.track-list
|
(.track-list
|
||||||
:max-height "400px"
|
:max-height "400px"
|
||||||
|
|
@ -135,9 +161,7 @@
|
||||||
:align-items center
|
:align-items center
|
||||||
:padding "12px 15px"
|
:padding "12px 15px"
|
||||||
:border-bottom "1px solid #2a3441"
|
:border-bottom "1px solid #2a3441"
|
||||||
:transition "background-color 0.2s"
|
:transition "background-color 0.2s")
|
||||||
(:hover
|
|
||||||
:background "#1a2332"))
|
|
||||||
|
|
||||||
(.track-info
|
(.track-info
|
||||||
:flex 1
|
:flex 1
|
||||||
|
|
@ -219,22 +243,23 @@
|
||||||
:font-family "Courier New, monospace"
|
:font-family "Courier New, monospace"
|
||||||
:font-size "14px"
|
:font-size "14px"
|
||||||
:border-radius "3px"
|
:border-radius "3px"
|
||||||
:transition "all 0.2s"
|
:transition "all 0.2s")
|
||||||
(:hover
|
((:and .btn :hover)
|
||||||
:background "#3a4551"
|
:background "#3a4551"
|
||||||
:border-color "#3a4551")
|
:border-color "#3a4551")
|
||||||
|
|
||||||
|
(.btn
|
||||||
(.btn-primary
|
(.btn-primary
|
||||||
:background "#0066cc"
|
:background "#0066cc"
|
||||||
:border-color "#0088ff"
|
:border-color "#0088ff")
|
||||||
(:hover
|
((:and .btn-primary :hover)
|
||||||
:background "#0088ff"))
|
:background "#0088ff")
|
||||||
|
|
||||||
(.btn-secondary
|
(.btn-secondary
|
||||||
:background "#444"
|
:background "#444"
|
||||||
:border-color "#2a3441"
|
:border-color "#2a3441")
|
||||||
(:hover
|
((:and .btn-secondary :hover)
|
||||||
:background "#666"))
|
:background "#666")
|
||||||
|
|
||||||
(.btn-sm
|
(.btn-sm
|
||||||
:padding "4px 8px"
|
:padding "4px 8px"
|
||||||
|
|
@ -247,199 +272,201 @@
|
||||||
|
|
||||||
;; Playlist and Queue styles
|
;; Playlist and Queue styles
|
||||||
(.playlist-controls
|
(.playlist-controls
|
||||||
:margin-bottom "15px"
|
:margin-bottom "15px"
|
||||||
:display flex
|
:display flex
|
||||||
:gap "10px"
|
:gap "10px"
|
||||||
:align-items center)
|
:align-items center)
|
||||||
|
|
||||||
(.playlist-input
|
(.playlist-input
|
||||||
:flex 1
|
:flex 1
|
||||||
:padding "8px 12px"
|
:padding "8px 12px"
|
||||||
:background "#0a0a0a"
|
:background "#0a0a0a"
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:font-family "Courier New, monospace")
|
:font-family "Courier New, monospace")
|
||||||
|
|
||||||
(.playlist-list
|
(.playlist-list
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:background "#0a0a0a"
|
:background "#0a0a0a"
|
||||||
:min-height "100px"
|
:min-height "100px"
|
||||||
:padding "10px")
|
:padding "10px")
|
||||||
|
|
||||||
(.queue-controls
|
(.queue-controls
|
||||||
:margin-bottom "15px"
|
:margin-bottom "15px"
|
||||||
:display flex
|
:display flex
|
||||||
:gap "10px")
|
:gap "10px")
|
||||||
|
|
||||||
(.play-queue
|
(.play-queue
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:background "#0a0a0a"
|
:background "#0a0a0a"
|
||||||
:min-height "150px"
|
:min-height "150px"
|
||||||
:max-height "300px"
|
:max-height "300px"
|
||||||
:overflow-y auto
|
:overflow-y auto
|
||||||
:padding "10px")
|
:padding "10px")
|
||||||
|
|
||||||
(.queue-item
|
(.queue-item
|
||||||
:display flex
|
:display flex
|
||||||
:justify-content space-between
|
:justify-content space-between
|
||||||
:align-items center
|
:align-items center
|
||||||
:padding "8px 10px"
|
:padding "8px 10px"
|
||||||
:border-bottom "1px solid #2a3441"
|
:border-bottom "1px solid #2a3441"
|
||||||
:margin-bottom "5px"
|
:margin-bottom "5px")
|
||||||
(:last-child
|
((:and .queue-item :last-child)
|
||||||
:border-bottom none
|
:border-bottom none
|
||||||
:margin-bottom 0))
|
:margin-bottom 0)
|
||||||
|
|
||||||
(.empty-queue
|
(.empty-queue
|
||||||
:text-align center
|
:text-align center
|
||||||
:color "#666"
|
:color "#666"
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
:font-style italic)
|
:font-style italic)
|
||||||
|
|
||||||
(.no-tracks
|
(.no-tracks
|
||||||
:text-align center
|
:text-align center
|
||||||
:color "#666"
|
:color "#666"
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
:font-style italic)
|
:font-style italic)
|
||||||
|
|
||||||
(.no-playlists
|
(.no-playlists
|
||||||
:text-align center
|
:text-align center
|
||||||
:color "#666"
|
:color "#666"
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
:font-style italic)
|
:font-style italic)
|
||||||
|
|
||||||
(.loading
|
(.loading
|
||||||
:text-align center
|
:text-align center
|
||||||
:color "#4488ff"
|
:color "#4488ff"
|
||||||
:padding "20px")
|
:padding "20px")
|
||||||
|
|
||||||
(.error
|
(.error
|
||||||
:text-align center
|
:text-align center
|
||||||
:color "#ff0000"
|
:color "#ff0000"
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
:font-weight bold)
|
:font-weight bold)
|
||||||
|
|
||||||
;; Upload interface styles
|
;; Upload interface styles
|
||||||
(.upload-section
|
(.upload-section
|
||||||
:margin "20px 0"
|
:margin "20px 0"
|
||||||
:padding "20px"
|
:padding "20px"
|
||||||
:background "#0a0a0a"
|
:background "#0a0a0a"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius "5px")
|
:border-radius "5px")
|
||||||
|
|
||||||
(.upload-controls
|
(.upload-controls
|
||||||
:display flex
|
:display flex
|
||||||
:gap "15px"
|
:gap "15px"
|
||||||
:align-items center
|
:align-items center
|
||||||
:margin-bottom "15px")
|
:margin-bottom "15px")
|
||||||
|
|
||||||
(.upload-info
|
(.upload-info
|
||||||
:color "#888"
|
:color "#888"
|
||||||
:font-size "0.9em")
|
:font-size "0.9em")
|
||||||
|
|
||||||
(.upload-progress
|
(.upload-progress
|
||||||
:margin-top "10px"
|
:margin-top "10px"
|
||||||
:padding "10px"
|
:padding "10px"
|
||||||
:background "#1a2332"
|
:background "#1a2332"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius "3px")
|
:border-radius "3px")
|
||||||
|
|
||||||
(.progress-bar
|
(.progress-bar
|
||||||
:height "20px"
|
:height "20px"
|
||||||
:background "#4488ff"
|
:background "#4488ff"
|
||||||
:border-radius "3px"
|
:border-radius "3px"
|
||||||
:transition "width 0.3s ease"
|
:transition "width 0.3s ease"
|
||||||
:width "0%")
|
:width "0%")
|
||||||
|
|
||||||
(.progress-text
|
(.progress-text
|
||||||
:display block
|
:display block
|
||||||
:margin-top "5px"
|
:margin-top "5px"
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:font-size "0.9em")
|
:font-size "0.9em")
|
||||||
|
|
||||||
(input
|
(input
|
||||||
:padding "8px 12px"
|
:padding "8px 12px"
|
||||||
:background "#1a2332"
|
:background "#1a2332"
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius "3px"
|
:border-radius "3px"
|
||||||
:font-family "Courier New, monospace")
|
:font-family "Courier New, monospace")
|
||||||
|
|
||||||
(.upload-interface
|
(.upload-interface
|
||||||
:margin-top 2rem
|
:margin-top 2rem
|
||||||
:padding 1.5rem
|
:padding 1.5rem
|
||||||
:background-color "#1a2332"
|
:background-color "#1a2332"
|
||||||
:border-radius 8px
|
:border-radius 8px
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
|
|
||||||
(h3 :color "#00ffff"
|
(h3 :color "#00ffff"
|
||||||
:margin-bottom 1rem)
|
:margin-bottom 1rem)
|
||||||
|
|
||||||
(.upload-area
|
(.upload-area
|
||||||
:border "2px dashed #2a3441"
|
:border "2px dashed #2a3441"
|
||||||
:border-radius 8px
|
:border-radius 8px
|
||||||
:padding 2rem
|
:padding 2rem
|
||||||
:text-align center
|
:text-align center
|
||||||
:background-color "#0f0f0f"
|
:background-color "#0f0f0f"
|
||||||
:transition "border-color 0.3s ease"
|
:transition "border-color 0.3s ease"
|
||||||
|
|
||||||
("&:hover" :border-color "#00ffff")
|
(.upload-icon :font-size 3rem
|
||||||
|
:color "#666"
|
||||||
|
:margin-bottom 1rem)
|
||||||
|
|
||||||
(.upload-icon :font-size 3rem
|
(p :color "#999"
|
||||||
:color "#666"
|
:margin-bottom 1rem)
|
||||||
:margin-bottom 1rem)
|
|
||||||
|
|
||||||
(p :color "#999"
|
(.btn :margin-top 1rem))
|
||||||
:margin-bottom 1rem)
|
|
||||||
|
((:and .upload-area :hover)
|
||||||
(.btn :margin-top 1rem)))
|
:border-color "#00ffff"))
|
||||||
|
|
||||||
;; Authentication Styles
|
;; Authentication Styles
|
||||||
(.auth-container
|
(.auth-container
|
||||||
:display flex
|
:display flex
|
||||||
:justify-content center
|
:justify-content center
|
||||||
:align-items center
|
:align-items center
|
||||||
:min-height "60vh"
|
:min-height "60vh"
|
||||||
:padding 2rem)
|
:padding 2rem)
|
||||||
|
|
||||||
(.auth-form
|
(.auth-form
|
||||||
:background-color "#1a2332"
|
:background-color "#1a2332"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius 8px
|
:border-radius 8px
|
||||||
:padding 2rem
|
:padding 2rem
|
||||||
:width "100%"
|
:width "100%"
|
||||||
:max-width 400px
|
:max-width 400px
|
||||||
:box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
|
:box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
|
||||||
|
|
||||||
(h2 :color "#00ffff"
|
(h2 :color "#00ffff"
|
||||||
:text-align center
|
:text-align center
|
||||||
:margin-bottom 1.5rem
|
:margin-bottom 1.5rem
|
||||||
:font-size 1.5rem)
|
:font-size 1.5rem)
|
||||||
|
|
||||||
(h3 :color "#00ffff"
|
(h3 :color "#00ffff"
|
||||||
:margin-bottom 1rem
|
:margin-bottom 1rem
|
||||||
:font-size 1.2rem))
|
:font-size 1.2rem))
|
||||||
|
|
||||||
(.form-group
|
(.form-group
|
||||||
:margin-bottom 3rem
|
:margin-bottom 3rem
|
||||||
|
|
||||||
(label :display block
|
(label :display block
|
||||||
:color "#ccc"
|
:color "#ccc"
|
||||||
:margin-bottom 0.5rem
|
:margin-bottom 0.5rem
|
||||||
:font-weight bold)
|
:font-weight bold)
|
||||||
|
|
||||||
(input :width "100%"
|
(input :width "100%"
|
||||||
:padding 0.75rem
|
:padding 0.75rem
|
||||||
:background-color "#0f0f0f"
|
:background-color "#0f0f0f"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius 4px
|
:border-radius 4px
|
||||||
:color "#fff"
|
:color "#fff"
|
||||||
:font-size 1rem
|
:font-size 1rem
|
||||||
:box-sizing border-box
|
:box-sizing border-box)
|
||||||
|
|
||||||
("&:focus" :border-color "#00ffff"
|
((:and input :focus)
|
||||||
:outline none
|
:border-color "#00ffff"
|
||||||
:box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)")))
|
:outline none
|
||||||
|
:box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)"))
|
||||||
|
|
||||||
(.form-actions
|
(.form-actions
|
||||||
:display flex
|
:display flex
|
||||||
|
|
@ -453,13 +480,15 @@
|
||||||
:text-align center
|
:text-align center
|
||||||
:font-weight bold
|
:font-weight bold
|
||||||
|
|
||||||
("&.success" :background-color "rgba(0, 255, 0, 0.1)"
|
((:parent .success)
|
||||||
:border "1px solid #00ffff"
|
:background-color "rgba(0, 255, 0, 0.1)"
|
||||||
:color "#00ffff")
|
:border "1px solid #00ffff"
|
||||||
|
:color "#00ffff")
|
||||||
|
|
||||||
("&.error" :background-color "rgba(255, 0, 0, 0.1)"
|
((:parent .error)
|
||||||
:border "1px solid #ff0000"
|
:background-color "rgba(255, 0, 0, 0.1)"
|
||||||
:color "#ff0000"))
|
:border "1px solid #ff0000"
|
||||||
|
:color "#ff0000"))
|
||||||
|
|
||||||
(.auth-link
|
(.auth-link
|
||||||
:text-align center
|
:text-align center
|
||||||
|
|
@ -467,9 +496,9 @@
|
||||||
:color "#999"
|
:color "#999"
|
||||||
|
|
||||||
(a :color "#00ffff"
|
(a :color "#00ffff"
|
||||||
:text-decoration none
|
:text-decoration none)
|
||||||
|
|
||||||
("&:hover" :text-decoration underline)))
|
((:and a :hover) :text-decoration underline))
|
||||||
|
|
||||||
;; Profile Styles
|
;; Profile Styles
|
||||||
(.profile-container
|
(.profile-container
|
||||||
|
|
@ -498,13 +527,13 @@
|
||||||
:padding 0.75rem 0
|
:padding 0.75rem 0
|
||||||
:border-bottom "1px solid #2a3441"
|
:border-bottom "1px solid #2a3441"
|
||||||
|
|
||||||
("&:last-child" :border-bottom none)
|
|
||||||
|
|
||||||
(label :color "#ccc"
|
(label :color "#ccc"
|
||||||
:font-weight bold)
|
:font-weight bold)
|
||||||
|
|
||||||
(span :color "#fff"))
|
(span :color "#fff"))
|
||||||
|
|
||||||
|
((:and .info-group :last-child) :border-bottom none)
|
||||||
|
|
||||||
(.role-badge
|
(.role-badge
|
||||||
:background-color "#00ffff"
|
:background-color "#00ffff"
|
||||||
:color "#000"
|
:color "#000"
|
||||||
|
|
@ -519,8 +548,7 @@
|
||||||
:justify-content center)
|
:justify-content center)
|
||||||
|
|
||||||
;; User Management Styles
|
;; User Management Styles
|
||||||
(.user-management
|
(.user-management :margin-top 2rem)
|
||||||
:margin-top 2rem)
|
|
||||||
|
|
||||||
(.users-table
|
(.users-table
|
||||||
:width "100%"
|
:width "100%"
|
||||||
|
|
@ -540,46 +568,46 @@
|
||||||
:border-bottom "1px solid #2a3441"))
|
:border-bottom "1px solid #2a3441"))
|
||||||
|
|
||||||
(tbody
|
(tbody
|
||||||
(tr :border-bottom "1px solid #2a3441"
|
(tr :border-bottom "1px solid #2a3441"
|
||||||
|
|
||||||
("&:hover" :background-color "#222")
|
(td :padding 1rem
|
||||||
|
:color "#fff"
|
||||||
|
:vertical-align middle))
|
||||||
|
((:and tr :hover) :background-color "#222")
|
||||||
|
|
||||||
(td :padding 1rem
|
|
||||||
:color "#fff"
|
|
||||||
:vertical-align middle))
|
|
||||||
|
|
||||||
(.user-actions
|
(.user-actions
|
||||||
:display flex
|
:display flex
|
||||||
:gap 0.5rem
|
:gap 0.5rem
|
||||||
|
|
||||||
(.btn :padding "0.25rem 0.5rem"
|
(.btn :padding "0.25rem 0.5rem"
|
||||||
:font-size 0.875rem))))
|
:font-size 0.875rem))))
|
||||||
|
|
||||||
(.user-stats
|
(.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)
|
||||||
|
|
||||||
(.stat-card
|
(.stat-card
|
||||||
:background-color "#1a2332"
|
:background-color "#1a2332"
|
||||||
:border "1px solid #2a3441"
|
:border "1px solid #2a3441"
|
||||||
:border-radius 8px
|
:border-radius 8px
|
||||||
:padding 1rem
|
:padding 1rem
|
||||||
:text-align center
|
:text-align center
|
||||||
|
|
||||||
(.stat-number :font-size 2rem
|
(.stat-number :font-size 2rem
|
||||||
:font-weight bold
|
:font-weight bold
|
||||||
:color "#00ffff"
|
:color "#00ffff"
|
||||||
:display block)
|
:display block)
|
||||||
|
|
||||||
(.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
|
||||||
|
) ;; End of let block
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue