@import 'systemDefaults'
@import 'breakpoints'
/* Widget switcher */
.om-switch
display: inline-flex
height: 2.0rem
border: solid 2px rgba(255, 255, 255, 0.3)
border-radius: 5px
& > :first-child
border-radius: 3px 0 0 3px
& > :last-child
border-radius: 0 3px 3px 0
&__element
display: inline-flex
padding: 0.5rem
width: 100%
font-size: 1.0rem
align-items: center
justify-content: center
cursor: pointer
transition: all 0.3s
&:hover
background: rgba(255, 255, 255, 0.3)
box-shadow: inset 0px 0px 5px 0 rgba(255, 255, 255, 0.1)
&:active
background: rgba(255, 255, 255, 0.2)
box-shadow: inset 0px 0px 5px 0 rgba(0, 0, 0, 0.1)
&_active
background: rgba(255, 255, 255, 0.8)
color: rgba(0, 0, 0, 1.0)
&:hover
background: rgba(255, 255, 255, 1.0)
&:active
background: rgba(255, 255, 255, 0.7)
/*******************/
#getcolor-interface__content
width: 26.825rem
/*********************************** Colors tab ***********************************/
/* Color destination switcher */
.getcolor-fillswitcher
margin: 0.25rem 0.25rem 0 0.25rem
.getcolor-switch
width: 100%
/* Colors block */
.getcolor-colorsblock
display: flex
flex-wrap: wrap
justify-content: space-between
width: 25.7rem
&__color
content: ""
display: inline-block
text-align: center
background: rgba(255, 255, 255, 0.3)
border: solid 2px rgba(255, 255, 255, 0.3)
height: 1.5rem
width: 1.5rem
margin: 0.25rem
border-radius: 3px
cursor: pointer
transition: transform 0.3s, opacity 1.0s, background-color 1.0s
&: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);
&_c1
background: rgba(251, 133, 129, 1.0)
&_c2
background: rgba(255, 254, 127, 1.0)
&_c3
background: rgba(130, 253, 128, 1.0)
&_c4
background: rgba(4, 124, 255, 1.0)
&_c5
background: rgba(255, 0, 0, 1.0)
&_c6
background: rgba(128, 64, 65, 1.0)
&_c7
background: rgba(0, 128, 129, 1.0)
&_c8
background: rgba(128, 127, 255, 1.0)
&_c9
background: rgba(129, 0, 65, 1.0)
&_c10
background: rgba(255, 0, 128, 1.0)
&_c11
background: rgba(128, 0, 0, 1.0)
&_c12
background: rgba(128, 0, 255, 1.0)
&_c13
background: rgba(255, 126, 0, 1.0)
&_c14
background: rgba(2, 128, 2, 1.0)
&_c15
background: rgba(1, 1, 161, 1.0)
&_c16
background: rgba(0, 0, 0, 1.0)
&_c17
background: rgba(132, 128, 0, 1.0)
&_c18
background: rgba(128, 128, 64, 1.0)
&_c19
background: rgba(128, 128, 128, 1.0)
&_c20
background: rgba(64, 128, 128, 1.0)
&_c21
background: rgba(192, 192, 192, 1.0)
&_c22
background: rgba(255, 255, 255, 1.0)
/* Picker block section */
.getcolor-pickerblock
padding-top: 0
margin: 0.25rem
&__picker
width: 100%
height: 6rem
background: linear-gradient(90deg, hsl(0, 100%, 100%) 0%, hsl(0, 100%, 50%) 100%)
box-sizing: border-box
cursor: crosshair
position: relative
&::before
display: block
width: 100%
height: 6rem
background: linear-gradient(0deg, hsla(0, 100%, 0%, 1.0) 0%, hsla(0, 100%, 0%, 0.0) 100%)
box-sizing: border-box
content: '.'
color: transparent
&-cursor
display: block
width: 10px
height: 10px
background: rgba(0, 0, 0, 0.1)
position: absolute
content: ' '
border: solid 2px rgba(255, 255, 255, 0.8)
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5)
border-radius: 3px
top: 0
left: calc(100% - 12px)
/* RGBA fields block
.getcolor-rgbacodeblock
display: flex
justify-content: space-between
&__prefix
display: flex
align-items: center
padding-left: 0.5rem
height: 1.8rem
font-family: 'Montserrat', sans-serif
font-size: 1.2rem
background: #413e53
color: white
margin: 0 0.25rem
width: 4.35rem
border: solid 2px rgba(255, 255, 255, 0.3)
cursor: default
transition: all 0.3s
&:hover
border: solid 2px rgba(255, 255, 255, 0.6)
&:active
border: solid 2px rgba(255, 255, 255, 0.9)
&__rgba
max-width: 2.5rem
font-family: 'Montserrat', sans-serif
font-size: 1.2rem
background: rgba(255, 255, 255, 0.0)
border: none
color: white
text-align: center
&__resultcolor
@extend .getcolor-colorsblock__color
position: relative
height: 1.8rem
width: 1.8rem
margin: 0 0.25rem
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
&: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
/* Hue and opacity line sections */
.getcolor-huelineblock, .getcolor-opacitylineblock
box-sizing: border-box
padding-top: 0.3rem
position: relative
margin: 0 0.25rem
&__table
width: 100%
border-collapse: collapse
&_cursor
position: absolute
top: 1.8rem
& tbody
position: relative
&__line
padding: 0
height: 2.0rem
position: relative
content: ""
&__picker-cursor
display: block
width: 12px
height: 2.0rem
background: rgba(0, 0, 0, 0.1)
position: absolute
content: ' '
border: solid 1px
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5)
top: -25px
left: calc(50%)
.getcolor-opacitylineblock
margin-bottom: 0.25rem
&__line::before
display: block
background: linear-gradient(90deg, hsla(0, 100, 50, 0.0),hsla(0, 100, 50, 1.0))
content: ""
height: 2.0rem
width: 100%
position: absolute
top: 0
left: 0
/****************************************************************************/
/*********************************** Layers tab *****************************/
/* Layer section */
.getcolor-layerlist
display: flex
flex-direction: row
flex-wrap: wrap
align-content: flex-start
height: 18.9rem
scrollbar-width: none
width: 25.5rem
overflow-y: scroll
&::-webkit-scrollbar
display: none
&__layerelement
display: flex
justify-content: space-between
align-items: center
padding: 0.25rem 0.25rem
transition: all 0.3s
&__layerscontrol
@extend .getcolor-layerlist__layerelement
width: 100%
padding-right: 0
&__label
margin: 0.25rem 0 0.25rem 0.25rem
cursor: default
&__layerbuttons
display: flex
justify-content: space-between
& > :first-child
margin-left: 0
& > :last-child
margin-right: 0
&__listbutton
display: flex
justify-content: center
align-items: center
width: 1.5rem
height: 1.5rem
margin: 0 0.25rem
font-size: 0.8rem
background: rgba(255, 255, 255, 0.3)
border: solid 2px rgba(255, 255, 255, 0.0)
border-radius: 5px
transition: all 0.3s
cursor: pointer
&:hover
background: rgba(255, 255, 255, 0.4)
border: solid 2px rgba(255, 255, 255, 0.3)
transform: scale(0.95) translateY(-1px)
&:active
background: rgba(255, 255, 255, 0.2)
border: solid 2px rgba(255, 255, 255, 0.9)
transform: scale(1.05) translateY(1px)
&_disabled
color: rgba(255,255,255,0.1)
background: rgba(255,255,255,0.1)
&:hover
background: rgba(255,255,255,0.1)
border: solid 2px rgba(255, 255, 255, 0.0)
transform: unset
&:active
background: rgba(255,255,255,0.1)
border: solid 2px rgba(255, 255, 255, 0.0)
transform: unset
&__buttonnumber
display: flex
justify-content: center
align-items: center
height: 1.8rem
width: 1.8rem
margin: 0 0.25rem
padding: 0.2rem
font-size: 1.0rem
border-radius: 3px
&_active
background: rgba(255, 0, 128, 0.9)
font-weight: 600
&:hover
background: rgba(255, 0, 128, 1.0)
&:active
background: rgba(255, 0, 128, 0.7)
&__removebutton
@extend .getcolor-layerlist__buttonnumber
&__color
@extend .getcolor-rgbacodeblock__resultcolor
width: 1.8rem
height: 1.8rem
padding: 0.2rem
&__prefix
@extend .getcolor-rgbacodeblock__prefix
height: 2.2rem
padding-left: 0.25rem
font-size: 1.0rem
margin: 0 0.15rem
&_hexa
width: 9.5rem
&_stop
width: 5.5rem
&__field
@extend .getcolor-rgbacodeblock__rgba
max-width: unset
font-size: 1.0rem
text-align: unset
padding-left: 0.25rem
&_hexa
width: 6rem
text-transform: lowercase
&_stop
width: 2.0rem
/****************************************************************************/
/*********************************** Gradient tab *****************************/
/* Gradients block */
.getcolor-gradientsblock
@extend .getcolor-colorsblock
margin-top: 0.25rem
&__gradient
@extend .getcolor-colorsblock__color
width: 2.8rem
height: 2.8rem
&_g4
background: linear-gradient(0deg, rgba(122, 188, 255, 1.0) 0%, rgba(96, 171, 248, 1.0) 44%, rgba(64, 150, 238, 1.0) 100%)
&_g5
background: linear-gradient(0deg, rgba(240, 183, 161, 1.0) 0%, rgba(140, 51, 16, 1.0) 50%, rgba(117, 34, 1, 1.0) 51%, rgba(191, 110, 78, 1.0) 100%)
&_g6
background: linear-gradient(0deg, rgba(98, 108, 136, 1.0) 0%, rgba(63, 76, 107, 1.0) 100%)
&_g7
background: linear-gradient(0deg, rgba(245, 246, 246, 1.0) 0%, rgba(219, 220, 226, 1.0) 21%, rgba(184, 186, 198, 1.0) 49%, rgba(221, 223, 227, 1.0) 80%, rgba(245, 246, 246, 1.0) 100%)
&_g8
background: linear-gradient(0deg, rgba(203, 96, 179, 1.0) 0%, rgba(193, 70, 161, 1.0) 50%, rgba(168, 0, 119, 1.0) 51%, rgba(219, 54, 164, 1.0) 100%)
&_g9
background: linear-gradient(0deg, rgba(174, 188, 191, 1.0) 0%, rgba(110, 119, 116, 1.0) 50%, rgba(10, 14, 10, 1.0) 51%, rgba(10, 8, 9, 1.0) 100%)
&_g10
background: linear-gradient(0deg, rgba(169, 228, 247, 1.0) 0%, rgba(15, 180, 231, 1.0) 100%)
&_g11
background: linear-gradient(135deg, rgba(80, 90, 221, 1.0) 34%, rgba(190, 64, 192, 1.0) 66%, rgba(251, 168, 43, 1.0) 96%)
&_g12
background: linear-gradient(210deg, rgba(255, 255, 255, 1.0) 0%, rgba(98, 132, 255, 1.0) 50%, rgba(255, 0, 0, 1.0) 100%)
&_g13
background: linear-gradient(0deg, rgba(255, 222, 233, 1.0) 0%, rgba(181, 255, 252, 1.0) 100%)
&_g14
background: linear-gradient(225deg, rgba(255, 60, 172, 1.0) 0%, rgba(120, 75, 160, 1.0) 50%, rgba(43, 134, 197, 1.0) 100%)
& > :nth-child(-n+7)
margin-bottom: 0.5rem
& > *
border: none
&:hover
border: none
/* Gradient settings */
.getcolor-gradientsettings
margin: 0 0.25rem
&__buttonradial
display: inline-block
font-size: 0.8rem
padding: 0.5rem
text-align: center
width: 100%
background: rgba(255, 255, 255, 0.3)
border: solid 2px rgba(255, 255, 255, 0.3)
height: 1.0rem
border-radius: 3px
cursor: pointer
transition: transform 0.3s, opacity 1.0s, background-color 1.0s
&:hover
transform: scale(0.98)
background: rgba(255, 255, 255, 0.4)
&:active
transform: translateY(2px);
background: rgba(255, 255, 255, 0.2)
border: solid 2px rgba(255, 255, 255, 0.8)
&__button
width: unset
&__prefix
@extend .getcolor-rgbacodeblock__prefix
&_degree
width: 7rem
height: 2rem
font-size: 0.9rem
text-transform: uppercase
&__field
@extend .getcolor-rgbacodeblock__rgba
max-width: unset
&_degree
width: 3rem
font-size: 0.9rem
text-transform: lowercase
/* Code block */
.getcolor-codeblock
margin: 0.25rem
&__panel
display: inline-block
background: rgba(255, 255, 255, 0.1)
width: 100%
border-radius: 5px
&__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-bottom: 0.5rem
font-family: monospace
font-size: 1.2em
overflow: scroll
-ms-overflow-style: none
scrollbar-width: none
height: 6rem
background: rgba(35, 52, 99, 1.0)
border-radius: 0 0 5px 5px
&::-webkit-scrollbar
display: none
&__linenumbers
line-height: 1.5rem
padding: 0 0.75rem
white-space: pre-wrap
&__code
line-height: 1.5rem
user-select: text
white-space: pre-wrap
& > *
user-select: auto
/* Tabs block */
.getcolor-tabssection
display: flex
justify-content: space-between
width: 25.7rem
& > :first-child
margin-left: 0
& > :last-child
margin-right: 0
&__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
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