@import 'systemDefaults'
@import 'breakpoints'
/* Label Widget */
.om-field
font-size: 1.0rem
font-family: 'Montserrat', sans-serif
/* Range Widget */
.om-range
-webkit-appearance: none
width: 19rem
height: 0
border-radius: 2px
background: rgba(255,255,255,0.3)
border: none
outline: none
&::-webkit-slider-thumb
appearance: none
width: 0.5rem
height: 1.65rem
background: rgba(255, 255, 255, 0.9)
cursor: pointer
transition: all 0.3s
&:hover
background: rgba(255, 255, 255, 1.0)
&:active::-webkit-slider-thumb
background: rgba(255, 255, 255, 0.8)
&::-moz-range-thumb
width: 0.5rem
height: 1.65rem
border: 0
border-radius: 0
background: rgba(255, 255, 255, 0.9)
cursor: pointer
transition: all 0.3s
&:hover
background: rgba(255, 255, 255, 1.0)
&:active::-moz-range-thumb
background: rgba(255, 255, 255, 0.8)
/****************************************************************/
/* Button shadow */
.shadowdialog-buttonshadow,
.shadowdialog-textshadow,
display: flex
flex-direction: column
#shadowdialog-buttonshadow__prefix_r,
#shadowdialog-buttonshadow__prefix_g,
#shadowdialog-buttonshadow__prefix_b,
#shadowdialog-buttonshadow__prefix_a
padding: 0 0.25rem
.shadowdialog-buttonshadow__button
width: unset
.shadowdialog-optionblock
display: inline-flex
justify-content: space-between
align-items: center
margin: 0.25rem 0
&__label
display: inline-flex
margin: 0 0.25rem
min-width: 9.2rem
&__range
display: inline-flex
height: 0.15rem
margin: 0 0.25rem
&__field
display: inline-flex
height: 2.0rem
width: 3rem
border: solid 2px rgba(255,255,255,0.3)
margin: 0 0.25rem
&__button
height: 0.8rem
width: 0.8rem
font-size: 0.7rem
margin: 0 0.25rem
&::after
left: -35% !important
/* Color Block
.shadowdialog-rgbacodeblock
display: flex
justify-content: space-between
align-content: center
margin: 0.25rem
&__label
display: inline-flex
align-items: center
min-width: 8rem
&__prefix
display: inline-flex
align-items: center
height: 2.0rem
background: rgba(255, 255, 255, 0.3)
border: solid 2px rgba(255, 255, 255, 0.3)
padding: 0 0.5rem
&__rgba
width: 1.8rem
font-family: 'Montserrat', sans-serif
font-size: 1rem
color: rgba(255, 255, 255, 1.0)
padding-left: 0.25rem
background: rgba(255, 255, 255, 0.0)
border: none
&__resultcolor
display: inline-block
position: relative
width: 2.0rem
height: 2.0rem
background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%)
background-size: 20px 20px
background-position: 0 0, 0 10px, 10px -10px, -10px 0px
border: solid 2px rgba(255, 255, 255, 0.3)
transition: all 0.3s
&:before
display: block
background: rgba(255, 0, 0, 1.0)
content: ""
border: solid 2px rgba(255, 255, 255, 0.3)
border-radius: 3px
height: 100%
width: 100%
position: absolute
top: -2px
left: -2px
&:hover
border: solid 2px rgba(255, 255, 255, 0.3)
transform: scale(0.90)
&:active
border: solid 2px rgba(255, 255, 255, 0.9)
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
/* Code Block
.shadowdialog-codeblock
&__panel
display: inline-block
background: rgba(255, 255, 255, 0.1)
border-radius: 5px
margin: 0.25rem
&__codetab
display: inline-block
margin-left: 2rem
padding: 0.5rem
background: rgba(35, 52, 99, 1.0)
&__copy
display: inline-block
float: right
height: 1.0rem
font-size: 0.8rem
padding: 0.59rem
border-top-right-radius: 5px
cursor: pointer
transition: all 0.3s
&:hover
background: rgba(255, 255, 255, 0.3)
&:active
background: rgba(0, 0, 0, 0.3)
&__codearea
display: flex
padding-top: 0.25rem
padding-bottom: 0.5rem
font-family: monospace
font-size: 1.2em
overflow: scroll
-ms-overflow-style: none
scrollbar-width: none
height: 2rem
background: rgba(35, 52, 99, 1.0)
border-radius: 0 0 5px 5px
&::-webkit-scrollbar
display: none
&__linenumbers
line-height: 1.5rem
padding: 0.25rem 0.75rem
white-space: pre-wrap
&__code
line-height: 1.5rem
padding: 0.25rem 0
user-select: text
white-space: pre-wrap
& > *
user-select: auto
/* Tabs block */
.shadowdialog-tabssection
display: flex
bottom: 0.25rem
justify-content: space-between
padding: 0
margin: 0.25rem
& > :first-child
margin-left: 0
& > :last-child
margin-right: 0.35rem
&__tab
display: flex
justify-content: center
align-items: center
border: solid 2px rgba(255, 255, 255, 0.0)
border-radius: 5px
margin: 0 0.25rem
padding: 0.5rem 1rem
height: 2.5rem
width: 100%
transition: all 0.3s
font-size: 1.5rem
cursor: pointer
&:hover
letter-spacing: 1px
background: rgba(255, 255, 255, 0.0)
border: solid 2px rgba(255, 255, 255, 0.0)
transform: scale(1.05)
&:active
background: rgba(255, 255, 255, 0.4)
border: solid 2px rgba(255, 255, 255, 0.15)
color: rgba(255, 255, 255, 0.9)
&_active
transform: scale(0.95)
background: rgba(255, 255, 255, 0.8)
border: solid 2px rgba(255, 255, 255, 0.1)
color: rgba(0, 0, 0, 1.0)
&:hover
transform: scale(1.0)
background: rgba(255, 255, 255, 1.0)
border: solid 2px rgba(255, 255, 255, 0.25)
&:active
background: rgba(255, 255, 255, 0.4)
border: solid 2px rgba(255, 255, 255, 0.15)
color: rgba(255, 255, 255, 0.9)
&__title
font-size: 1.0rem
margin-left: 0.5rem