You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
287 lines
4.4 KiB
Sass
287 lines
4.4 KiB
Sass
@import url('https://fonts.googleapis.com/css?family=Ubuntu')
|
|
@import vars
|
|
|
|
body
|
|
font-family: $fNormal
|
|
color: $cPrimary
|
|
background-color: $cBackground
|
|
overflow: hidden
|
|
max-height: 100%
|
|
max-width: 100%
|
|
|
|
::-webkit-scrollbar
|
|
width: 12px
|
|
height: 12px
|
|
|
|
::-webkit-scrollbar-thumb
|
|
background: darken($cBackground, 5)
|
|
border-radius: 10px
|
|
|
|
::-webkit-scrollbar-track
|
|
background: lighten($cBackground, 5)
|
|
border-radius: 10px
|
|
|
|
input
|
|
color: $cPrimary
|
|
background: $cBackground
|
|
border: 2px solid $cPrimary
|
|
border-radius: 12px
|
|
padding: 5px
|
|
margin: auto
|
|
|
|
input:focus
|
|
background: $cBackgroundVariant
|
|
|
|
input::placeholder
|
|
color: darken($cPrimary, 20)
|
|
|
|
input.cell
|
|
margin: 10px auto
|
|
|
|
button
|
|
background: $cBackgroundVariant
|
|
border: none
|
|
border-radius: 12px
|
|
color: $cPrimary
|
|
padding: 10px
|
|
|
|
.column
|
|
display: table-column
|
|
padding: 20px
|
|
align-content: center
|
|
margin: 0 auto
|
|
text-align: center
|
|
max-height: 100vh
|
|
height: 100vh
|
|
|
|
.cell
|
|
display: list-item
|
|
list-style: none
|
|
align-content: center
|
|
text-align: center
|
|
margin: auto
|
|
user-select: none
|
|
|
|
.space
|
|
height: 20px
|
|
|
|
h2.cell
|
|
padding: 5px
|
|
|
|
div.cell
|
|
display: flex
|
|
align-items: center
|
|
width: 100%
|
|
position: relative
|
|
|
|
div.cell > *
|
|
display: table-cell
|
|
align-items: center
|
|
width: 100%
|
|
padding: 2px 5px
|
|
|
|
.text-left
|
|
text-align: left
|
|
|
|
.text-right
|
|
text-align: right
|
|
|
|
.label
|
|
font-weight: bold
|
|
|
|
.listContainer
|
|
display: grid
|
|
width: 100%
|
|
text-align: left
|
|
overflow: hidden
|
|
position: relative
|
|
max-height: 90vh
|
|
|
|
.listContainer:hover
|
|
overflow: auto
|
|
|
|
.logEntry
|
|
display: list-item
|
|
list-style: none
|
|
padding: 5px
|
|
border-radius: 10px
|
|
margin: 5px
|
|
color: $cOnSurfaceVariant
|
|
user-select: none
|
|
position: relative
|
|
font-size: 110%
|
|
|
|
.logEntry[level=debug]
|
|
background: $cDebug
|
|
|
|
.logEntry[level=verbose]
|
|
background: $cVerbose
|
|
|
|
.logEntry[level=info]
|
|
background: $cInfo
|
|
|
|
.logEntry[level=warn]
|
|
background: $cWarn
|
|
|
|
.logEntry[level=warning]
|
|
background: $cWarn
|
|
user-select: all
|
|
|
|
.logEntry[level=error]
|
|
background: $cError
|
|
user-select: all
|
|
|
|
.logEntry .infodiv
|
|
display: flex
|
|
list-style: none
|
|
font-size: 75%
|
|
width: 100%
|
|
|
|
.logEntry .infodiv span
|
|
padding: 0 2px
|
|
margin: auto
|
|
width: 50%
|
|
display: table-cell
|
|
|
|
.songEntry
|
|
display: flex
|
|
background: lighten($cBackgroundVariant, 5)
|
|
padding: 2px
|
|
margin: 5px
|
|
border-radius: 5px
|
|
text-decoration: none
|
|
color: $cPrimary
|
|
|
|
> *
|
|
display: table-column
|
|
margin: auto
|
|
|
|
img
|
|
max-height: 30px
|
|
max-width: 20%
|
|
height: auto
|
|
width: auto
|
|
border-radius: 2px
|
|
|
|
a
|
|
width: 80%
|
|
text-decoration: none
|
|
color: $cPrimary
|
|
|
|
#content
|
|
display: flex
|
|
height: 100%
|
|
width: 100%
|
|
background-color: $cBackground
|
|
|
|
#column-left, #column-middle, #column-right
|
|
width: 33%
|
|
|
|
#column-middle
|
|
background: $cBackgroundVariant
|
|
border-radius: 20px
|
|
height: 100%
|
|
|
|
#column-right
|
|
padding: 0 20px 20px
|
|
display: grid
|
|
align-content: start
|
|
|
|
#user-avatar
|
|
max-width: 300px
|
|
width: 100%
|
|
height: auto
|
|
border-radius: 25%
|
|
|
|
#avatar-container
|
|
max-width: 300px
|
|
width: 100%
|
|
margin: auto
|
|
position: relative
|
|
|
|
#status-indicator
|
|
height: 20%
|
|
width: 20%
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
border-radius: 25%
|
|
display: block
|
|
z-index: 200
|
|
|
|
#status-indicator[status=online]
|
|
background-color: $cOnline
|
|
|
|
#status-indicator[status=idle]
|
|
background-color: $cIdle
|
|
|
|
#status-indicator[status=dnd]
|
|
background-color: $cDnd
|
|
|
|
#status-indicator[status=offline]
|
|
background-color: $cOffline
|
|
|
|
#guild-select
|
|
background: $cBackgroundVariant
|
|
color: $cPrimary
|
|
font-size: 150%
|
|
font-family: $fNormal
|
|
padding: 10px
|
|
width: 100%
|
|
margin: auto
|
|
border: none
|
|
height: 52px
|
|
border-radius: 12px
|
|
-webkit-appearance: none
|
|
|
|
#guild-icon-container
|
|
padding: 10px 0 0 0
|
|
display: flex
|
|
|
|
#guild-icon
|
|
max-width: 100px
|
|
width: 50%
|
|
height: auto
|
|
border-radius: 25%
|
|
|
|
#guild-nameAndIcon
|
|
width: 50%
|
|
|
|
#dj-songinfo
|
|
background-color: $cBackgroundVariant
|
|
border-radius: 20px
|
|
overflow-x: hidden
|
|
|
|
#songinfo-container
|
|
display: list-item
|
|
text-decoration: none
|
|
color: $cPrimary
|
|
padding: 10px
|
|
width: calc(100% - 20px)
|
|
|
|
#dj-queue-container
|
|
display: grid
|
|
padding: 0 5px 5px
|
|
|
|
#dj-songname
|
|
font-weight: bold
|
|
font-size: 120%
|
|
|
|
#dj-songImg
|
|
align-self: center
|
|
width: 80%
|
|
height: auto
|
|
margin: 0 10%
|
|
border-radius: 5%
|
|
|
|
#guildinfo
|
|
max-height: 90vh
|
|
overflow-y: hidden
|
|
|
|
#guildinfo:hover
|
|
overflow-y: auto
|
|
|
|
#dj-songQueue
|
|
display: grid
|
|
max-height: 100%
|