mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 19:46:16 +00:00
128 lines
2.3 KiB
Sass
128 lines
2.3 KiB
Sass
.contextMenuClose
|
|
width: 100%
|
|
height: 100%
|
|
|
|
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: var(--background-300)
|
|
border: 1px solid var(--background-200)
|
|
border-radius: 6px
|
|
|
|
overflow: hidden
|
|
|
|
transition: transform 0.35s var(--animation-bounce), opacity 0.35s var(--animation-bounce)
|
|
transform-origin: center center
|
|
opacity: 0.5
|
|
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: var(--foreground-white)
|
|
|
|
.contextMenuItem
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
width: 100%
|
|
height: auto
|
|
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: flex-start
|
|
align-items: center
|
|
gap: 0.5rem
|
|
|
|
background-color: var(--background-300)
|
|
color: var(--foreground-white)
|
|
border: none
|
|
border-radius: 3px
|
|
|
|
cursor: pointer
|
|
.contextMenuItem:hover
|
|
background-color: var(--background-200)
|
|
.contextMenuItem__critical
|
|
color: var(--danger)
|
|
.contextMenuItem__warning
|
|
color: var(--warning)
|
|
.contextMenuItem__success
|
|
color: var(--success)
|
|
.contextMenuItem__info
|
|
color: var(--primary)
|
|
|
|
.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: 100%
|
|
height: 1px
|
|
|
|
border: none
|
|
background-color: var(--background-200)
|
|
|
|
.contextMenu__show
|
|
opacity: 1
|
|
transform: scale(1, 1)
|
|
|
|
.contextMenu__show--mouse
|
|
opacity: 1
|
|
transform: scale(1, 1)
|
|
transform-origin: top left
|
|
.contextMenu__show--button
|
|
opacity: 1
|
|
transform: scale(1, 1)
|
|
transform-origin: top center
|
|
.contextMenu__show--center
|
|
opacity: 1
|
|
transform: scale(1, 1)
|
|
transform-origin: center center
|
|
|
|
.contextMenu__hide
|
|
opacity: 0
|
|
transform: scale(0, 0)
|