@import 'systemDefaults'
@import 'breakpoints'
.app-interface
width: 100%
height: 100%
background: linear-gradient(lighten($background-color, 10%), $background-color)
opacity: 0.0
transition: $speed
&__window
position:absolute
top: calc(50% - 15rem)
left: calc(50% - 10rem)
height: 30rem
width: 20rem
background: rgba($frames-color, .1)
border-radius: 10px 10px 0 0
&__titlebar
position:absolute
top: 0
left: 0
padding: 0.4rem
height: 1.5rem
background: linear-gradient(rgba($frames-color,.5), rgba(darken($frames-color, 5%), 0.2))
cursor: move
border-radius: 10px 10px 0 0
&__titlebaricon
display: inline-flex
align-items: center
justify-content: center
font-size: 0.6rem
width: 1.5rem
height: 1.5rem
background: $icon-color
border-radius: 25%
cursor: pointer
&:active
transform: translateY(1px)
&__titlebarcaption
display: inline
text-align: center
height: 1.2rem
vertical-align: middle
font-size: 0.8rem
font-weight: 700
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4)
cursor: default
&__closebutton
display: inline-flex
align-items: center
justify-content: center
float: right
margin-top: 0.23rem
width: 1rem
height: 1rem
font-size: 0.6rem
background: rgba(223, 51, 100, 1.0)
border-radius: 25%
cursor: pointer
&:active
transform:translateY(1px)
&__content
background: $background-color
width: 100%
height: 100%
border: solid 1px rgba($frames-color, 0.2)
box-sizing: border-box
overflow: hidden
.app-dialog
position: absolute
width: 100%
height: 100%
background: rgba(0, 0, 0, 0.5)
opacity: 0.0
transition: 0.3s opacity
&__window
position: absolute
top: calc(50% - 4.5rem)
left: calc(50% - 10rem)
height: 9rem
width: 20rem
background: rgba($frames-color, .1)
border-radius: 10px 10px 0 0
&__titlebar
top: 0
left: 0
padding: 0.4rem
height: 1.5rem
background: linear-gradient(rgba(102, 98, 127, 1.0), rgba(darken(rgb(102, 98, 127), 20%), 1.0))
cursor: move
border-radius: 10px 10px 0 0
&__titlebarcaption
display: inline
text-align: center
height: 1.2rem
vertical-align: middle
font-size: 0.8rem
font-weight: 700
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4)
cursor: default
&__closebutton
display: inline-flex
align-items: center
justify-content: center
float: right
margin-top: 0.23rem
width: 1rem
height: 1rem
font-size: 0.6rem
background: rgba(223, 51, 100, 1.0)
border-radius: 25%
cursor: pointer
&:active
transform: translateY(1px)
&__content
background: $background-color
width: 100%
border: solid 1px rgba($frames-color, 0.2)
box-sizing: border-box
overflow: hidden