182 lines
No EOL
3.2 KiB
Sass
182 lines
No EOL
3.2 KiB
Sass
$primary: rgb(66, 130, 167)
|
|
$success: rgb(95, 175, 99)
|
|
$warning: rgb(236, 136, 77)
|
|
$critical: rgb(247, 111, 111)
|
|
|
|
$fg100: rgb(248,248,250)
|
|
$fg200: rgb(225,227,233)
|
|
$fg300: rgb(203,205,216)
|
|
$fg400: rgb(180,184,200)
|
|
$fg500: rgb(146,150,169)
|
|
$fg600: rgb(78,83,106)
|
|
|
|
$bg100: rgb(61,66,83)
|
|
$bg200: rgb(50,54,68)
|
|
$bg300: rgb(42,45,57)
|
|
$bg400: rgb(37,39,50)
|
|
$bg500: rgb(32,35,44)
|
|
$bg600: rgb(28,30,38)
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
html
|
|
font-size: 16px
|
|
font-family: 'Roboto', sans-serif
|
|
font-weight: 400
|
|
color: $fg100
|
|
background-color: $bg500
|
|
|
|
body
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: center
|
|
align-items: center
|
|
gap: 1rem
|
|
|
|
> button
|
|
margin: 0
|
|
padding: 0.5rem 1rem
|
|
|
|
width: auto
|
|
height: 3rem
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
color: $fg100
|
|
background-color: $bg300
|
|
border: 1px solid $bg200
|
|
border-radius: 3px
|
|
|
|
cursor: pointer
|
|
|
|
transition: all 0.2s ease-in-out
|
|
|
|
&:hover
|
|
background-color: $bg200
|
|
|
|
.contextMenuClose
|
|
width: 100vw
|
|
height: 100vh
|
|
|
|
position: fixed
|
|
top: 0
|
|
left: 0
|
|
|
|
background-color: transparent
|
|
z-index: 99998
|
|
|
|
.contextMenu
|
|
margin: 0
|
|
padding: 0.25rem
|
|
|
|
width: calc( 100vw - 10px )
|
|
height: auto
|
|
max-width: 300px
|
|
|
|
position: absolute
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
gap: 0.25rem
|
|
|
|
background-color: $bg300
|
|
border: 1px solid $bg200
|
|
border-radius: 6px
|
|
|
|
overflow: hidden
|
|
|
|
transition: all 0.2s ease-in-out
|
|
transform-origin: top left
|
|
opacity: 0
|
|
transform: scale(0, 0)
|
|
z-index: 99999
|
|
|
|
.contextMenuTitle
|
|
margin: 0
|
|
padding: 0.25rem 0.5rem
|
|
|
|
width: 100%
|
|
|
|
text-align: center
|
|
font-size: 1.2rem
|
|
font-weight: 400
|
|
color: $fg300
|
|
|
|
.contextMenuItem
|
|
margin: 0
|
|
padding: 0.25rem
|
|
|
|
width: 100%
|
|
height: auto
|
|
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: flex-start
|
|
align-items: center
|
|
gap: 0.5rem
|
|
|
|
background-color: $bg300
|
|
color: $fg300
|
|
border: none
|
|
border-radius: 3px
|
|
|
|
cursor: pointer
|
|
.contextMenuItem:hover
|
|
background-color: $bg200
|
|
.contextMenuItem__critical
|
|
color: $critical
|
|
//.contextMenuItem__critical:hover
|
|
// background-color: rgba($critical, 0.1)
|
|
.contextMenuItem__warning
|
|
color: $warning
|
|
//.contextMenuItem__warning:hover
|
|
// background-color: rgba($warning, 0.1)
|
|
.contextMenuItem__success
|
|
color: $success
|
|
//.contextMenuItem__success:hover
|
|
// background-color: rgba($success, 0.1)
|
|
.contextMenuItem__info
|
|
color: $primary
|
|
//.contextMenuItem__info:hover
|
|
// background-color: rgba($primary, 0.1)
|
|
|
|
.contextMenuText
|
|
margin: 0
|
|
padding: 0
|
|
|
|
font-size: 1rem
|
|
font-weight: 400
|
|
|
|
.contextMenuIcon
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: 1.25rem
|
|
height: 1.25rem
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.contextMenuDivider
|
|
margin: 0 auto
|
|
padding: 0
|
|
|
|
width: 90%
|
|
height: 1px
|
|
|
|
border: none
|
|
background-color: $bg200
|
|
|
|
.contextMenu__show
|
|
opacity: 1
|
|
transform: scale(1, 1)
|
|
|
|
.contextMenu__hide
|
|
opacity: 0
|
|
transform: scale(0, 0) |