@import 'systemDefaults'
@import 'breakpoints'
section
padding: 0.5rem
.offset
&_light
transform: translate(1px, 1px)
&_standard
transform: translate(2px, 2px)
span, label
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
/******************************************************************************************************/
/* GetColor: Colors Block */
.getcolor-colorsblock
display: flex
flex-wrap: wrap
align-items: center
justify-content: space-between
padding-bottom: 0
&__color
box-sizing: border-box
display: inline-block
border: solid 2px rgba($frames-color, 0.6)
width: 1rem
height: 1rem
cursor: pointer
margin-right: 0.5rem
margin-bottom: 0.5rem
&:nth-child(12n)
margin-right: 0
&:active
transform: translateY(1px) translateX(1px)
&_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(2, 254, 133, 1.0)
&_c5
background: rgba(129, 255, 247, 1.0)
&_c6
background: rgba(4, 124, 255, 1.0)
&_c7
background: rgba(254, 127, 196, 1.0)
&_c8
background: rgba(253, 130, 255, 1.0)
&_c9
background: rgba(255, 0, 0, 1.0)
&_c10
background: rgba(253, 254, 3, 1.0)
&_c11
background: rgba(128, 255, 0, 1.0)
&_c12
background: rgba(0, 255, 65, 1.0)
&_c13
background: rgba(0, 254, 255, 1.0)
&_c14
background: rgba(0, 128, 191, 1.0)
&_c15
background: rgba(129, 126, 193, 1.0)
&_c16
background: rgba(255, 0, 255, 1.0)
&_c17
background: rgba(128, 64, 65, 1.0)
&_c18
background: rgba(254, 131, 64, 1.0)
&_c19
background: rgba(0, 255, 0, 1.0)
&_c20
background: rgba(0, 128, 129, 1.0)
&_c21
background: rgba(0, 64, 128, 1.0)
&_c22
background: rgba(128, 127, 255, 1.0)
&_c23
background: rgba(129, 0, 65, 1.0)
&_c24
background: rgba(255, 0, 128, 1.0)
&_c25
background: rgba(128, 0, 0, 1.0)
&_c26
background: rgba(255, 126, 0, 1.0)
&_c27
background: rgba(2, 128, 2, 1.0)
&_c28
background: rgba(0, 128, 64, 1.0)
&_c29
background: rgba(0, 0, 255, 1.0)
&_c30
background: rgba(1, 1, 161, 1.0)
&_c31
background: rgba(127, 1, 127, 1.0)
&_c32
background: rgba(127, 0, 255, 1.0)
&_c33
background: rgba(70, 0, 0, 1.0)
&_c34
background: rgba(124, 61, 0, 1.0)
&_c35
background: rgba(0, 66, 0, 1.0)
&_c36
background: rgba(0, 67, 69, 1.0)
&_c37
background: rgba(0, 0, 128, 1.0)
&_c38
background: rgba(0, 0, 55, 1.0)
&_c39
background: rgba(66, 2, 62, 1.0)
&_c40
background: rgba(68, 0, 124, 1.0)
&_c41
background: rgba(0, 0, 0, 1.0)
&_c42
background: rgba(132, 128, 0, 1.0)
&_c43
background: rgba(128, 128, 64, 1.0)
&_c44
background: rgba(128, 128, 128, 1.0)
&_c45
background: rgba(64, 128, 128, 1.0)
&_c46
background: rgba(192, 192, 192, 1.0)
&_c47
background: rgba(64, 0, 65, 1.0)
&_c48
background: rgba(255, 255, 255, 1.0)
/* END: GetColor: Colors Block */
/******************************************************************************************************/
/******************************************************************************************************/
/* GetColor: Picker Block */
.getcolor-pickerblock
padding-top: 0
&__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 1px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
border-radius: 5px;
top: 0;
left: calc(100% - 12px);
/* END: GetColor: Picker Block */
/******************************************************************************************************/
/******************************************************************************************************/
/* GetColor: HSL code Block */
.getcolor-hslcodeblock
display: flex
padding: 0 0.5rem 0.5rem 0.5rem
max-height: 5rem
flex-wrap: wrap
justify-content: space-between
&__prefix
max-width: 6rem
font-family: 'Montserrat', sans-serif
font-size: 1rem
background: #413e53
color: white
padding: 0.2rem
box-sizing: border-box
border: solid 2px rgba(255, 255, 255, 0.1)
&__hsl
max-width: 2.5rem
padding: 0
font-family: 'Montserrat', sans-serif
font-size: 1rem
background: #413e53
border: none
color: white
box-sizing: border-box
text-align: center
/* END: GetColor: HSL code Block */
/******************************************************************************************************/
/******************************************************************************************************/
/* GetColor: HSL lines Block */
.getcolor-huelineblock, .getcolor-satlineblock, .getcolor-lightlineblock
box-sizing: border-box
padding-top: 0.3rem
position: relative
&__table
width: 100%
border-collapse: collapse
&_cursor
display: none
position: absolute
& tbody
position: relative
&__line
padding: 0
height: 1.5rem
&__picker-cursor
display: block
width: 12px
height: 1.5rem
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%)
/* END: GetColor: HSL lines Block */
/******************************************************************************************************/
/******************************************************************************************************/
/* GetColor: Hex code Block */
.getcolor-hexcodeblock
display: flex
padding: 0 0.5rem
max-height: 5rem
flex-wrap: wrap
justify-content: space-between
&__fieldblock
display: flex
flex-flow: column
&__label
font-weight: 500
text-align: center
padding-bottom: 0.5rem
&__codefield
font-family: 'Montserrat', sans-serif
font-size: 1rem
background: #413e53
color: white
padding: 0.2rem
box-sizing: border-box
border: solid 2px rgba(255, 255, 255, 0.1)
text-align: center
&_rgba
max-width: 3rem
&_hex
max-width: 4rem
padding: 0
font-family: 'Montserrat', sans-serif
font-size: 1rem
background: #413e53
border: none
color: white
box-sizing: border-box
&_prefix
padding-right: 0
/* END: GetColor: Hex code Block */
/******************************************************************************************************/
/******************************************************************************************************/
/* GetColor: Button Block */
.getcolor-buttonsblock
display: flex
justify-content: space-between
margin-top: 0.4rem
&__button
font-size: 0.8rem
padding: 0.5rem
background: rgba($frames-color, 0.3)
height: 1rem
border-radius: 5px
cursor: pointer
display: flex
& span
font-weight: 500
padding-left: 0.3rem
&:active
transform: translate(2px, 2px)
&_rgba
display: none
&_hsla
display: none
.getcolor__colorwrapper
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
.getcolor__color
background: rgba(255, 0, 0, 1.0)
height: 2rem
width: 2rem
border-radius: 5px
cursor: pointer
box-sizing: border-box
border: solid 3px rgba($frames-color, 0.3)
&:active
transform: translate(2px, 2px)
/* END: GetColor: Button Block */
/******************************************************************************************************/
/********************************************************************/
/* Dialog Settings */
.getcolor-helpblock
box-sizing: border-box
& h2
font-size: 1rem
font-weight: 600
margin: 0
& p
font-size: 0.8rem
font-weight: 500
margin: 0.5rem 0 0.3rem 0
& a
color: rgb(255, 255, 255)
text-decoration: none
cursor: pointer
/* END: Dialog Settings */
/********************************************************************/