File: /var/www/html/wpwatermates/wp-content/plugins/chaty/src/scss/components/_chaty-color-picker.scss
.cht-colorpicker {
position: relative;
&__preview {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
height: 30px;
border-radius: 4px;
width: 30px;
overflow: hidden;
&--inner {
width: 100%;;
height: 100%;
display: inline-block;
border-width: 2px;
border-style: solid;
cursor: pointer;
position: relative;
}
}
&__dropdown {
position: absolute;
width: 230px;
box-shadow: 0 11.5px 19.5px -4.875px rgba(0,0,0,.2);
border-radius: 8px;
background: #fff;
top: 100%;
z-index: 9;
display: none;
ul {
padding: .8rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #eaeff2;
margin: 0;
grid-gap: 6px;
li {
margin: 0;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
padding: 2px;
border-width: 2px;
border-style: solid;
border-color: transparent;
cursor: pointer;
&.active {
border-color: #83a1b7;
}
span {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 4px 19px 0 hsl(0deg 0% 85% / 40%);
}
div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #b78deb;
font-size: inherit;
font-weight: 600;
}
&:last-child {
border: 1px solid #c6d7e3;
}
}
}
}
.a-color-picker {
display: none;
input {
width: 100px !important;
}
}
.a-color-picker-rgb {
input {
width: 45px !important;
font-size: 14px;
height: 30px;
margin: 0;
}
}
.a-color-picker-row:not(.a-color-picker-row-top) {
padding: 8px 10px;
}
}