376 lines
6.4 KiB
Sass
376 lines
6.4 KiB
Sass
$red: rgb(182, 100, 103)
|
|
$orange: rgb(206, 170, 111)
|
|
$yellow: rgb(217, 188, 140)
|
|
$green: rgb(140, 151, 125)
|
|
$blue: rgb(141, 163, 185)
|
|
$purple: rgb(169, 136, 176)
|
|
|
|
$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)
|
|
|
|
$primary: $blue
|
|
$success: $green
|
|
$warning: $orange
|
|
$critical: $red
|
|
|
|
*
|
|
box-sizing: border-box
|
|
|
|
html
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
height: 100vh
|
|
|
|
font-size: 16px
|
|
font-family: 'Roboto', sans-serif
|
|
font-weight: 400
|
|
|
|
color: $fg100
|
|
background-color: $bg500
|
|
|
|
body
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
display: grid
|
|
grid-template-columns: 20rem 1fr
|
|
grid-template-rows: 1fr
|
|
grid-template-areas: "sidebar content"
|
|
|
|
border: 1px solid $bg200
|
|
border-radius: 6px
|
|
|
|
overflow: hidden
|
|
|
|
> 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
|
|
|
|
nav
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
grid-area: sidebar
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
gap: 0.5rem
|
|
|
|
border-right: 1px solid $bg200
|
|
|
|
> button
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
width: 100%
|
|
height: auto
|
|
|
|
display: flex
|
|
justify-content: flex-start
|
|
align-items: center
|
|
|
|
color: $fg400
|
|
background-color: transparent
|
|
border: none
|
|
border-radius: 3px
|
|
|
|
cursor: pointer
|
|
|
|
transition: all 0.2s ease-in-out
|
|
|
|
&:hover
|
|
background-color: $bg400
|
|
|
|
> hr
|
|
margin: 0 auto
|
|
padding: 0
|
|
|
|
width: 100%
|
|
height: 1px
|
|
|
|
border: none
|
|
background-color: $bg200
|
|
|
|
main
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
grid-area: content
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
gap: 0.5rem
|
|
|
|
> 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
|
|
|
|
.code-block
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: 100%
|
|
height: auto
|
|
|
|
border: 1px solid $bg200
|
|
border-radius: 6px
|
|
|
|
color: $fg100
|
|
background-color: $bg600
|
|
|
|
overflow: hidden
|
|
|
|
pre
|
|
margin: 0
|
|
padding: 0.5rem
|
|
|
|
white-space: pre-wrap
|
|
|
|
display: block
|
|
|
|
font-size: 0.8rem
|
|
font-weight: 400
|
|
|
|
.code-header
|
|
margin: 0
|
|
padding: 0.3rem 0.3rem 0.3rem 0.8rem
|
|
|
|
width: 100%
|
|
height: auto
|
|
|
|
display: flex
|
|
flex-direction: row
|
|
justify-content: space-between
|
|
align-items: center
|
|
|
|
background-color: $bg500
|
|
border-bottom: 1px solid $bg200
|
|
|
|
p
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: auto
|
|
height: auto
|
|
|
|
font-size: 1rem
|
|
font-weight: 400
|
|
color: $fg400
|
|
|
|
button
|
|
margin: 0
|
|
padding: 0.25rem 0.5rem
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
color: $fg100
|
|
background-color: $bg500
|
|
border: none
|
|
border-radius: 3px
|
|
|
|
cursor: pointer
|
|
|
|
&: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: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
|
|
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: $fg300
|
|
|
|
.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: $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: 100%
|
|
height: 1px
|
|
|
|
border: none
|
|
background-color: $bg200
|
|
|
|
.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) |