mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-28 19:23:11 +01:00
105 lines
4.3 KiB
CSS
105 lines
4.3 KiB
CSS
.widget-accent-colors {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
max-width: 480px;
|
|
margin: 3px 0 0;
|
|
}
|
|
.widget-accent-colors .widget-accent-color-item {
|
|
position: relative;
|
|
flex-basis: 42px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
.widget-accent-color-item input.radio {
|
|
position: absolute;
|
|
left: -5000px;
|
|
}
|
|
.widget-accent-color-item input.radio + .widget-color-circle:after {
|
|
position: absolute;
|
|
left: 0;
|
|
display: inline-block;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
vertical-align: top;
|
|
background: url('data:image/svg+xml,%3Csvg height="15" viewBox="0 0 18 15" width="18" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23fff" fill-rule="evenodd"%3E%3Crect height="8" rx="1.472727" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -5.753048 6.110913)" width="3" x="3" y="6"/%3E%3Crect height="3" rx="1.472727" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -2.081475 9.974874)" width="16" x="3" y="6"/%3E%3C/g%3E%3C/svg%3E') no-repeat center 11px;
|
|
transition: transform 0.12s linear;
|
|
transform: scale3d(0, 0, 1);
|
|
}
|
|
.widget-accent-color-item input.radio + .widget-color-circle.bordered,
|
|
.widget-accent-color-item input.radio:checked + .widget-color-circle-custom.bordered {
|
|
box-shadow: inset 0 0 0 1px #eaeaea;
|
|
}
|
|
.widget-accent-color-item input.radio + .widget-color-circle-custom.bordered {
|
|
border: none;
|
|
}
|
|
.widget-accent-color-item input.radio + .widget-color-circle.light:after {
|
|
background-image: url('data:image/svg+xml,%3Csvg height="15" viewBox="0 0 18 15" width="18" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%2315202b" fill-rule="evenodd"%3E%3Crect height="8" rx="1.472727" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -5.753048 6.110913)" width="3" x="3" y="6"/%3E%3Crect height="3" rx="1.472727" transform="matrix(.70710678 -.70710678 .70710678 .70710678 -2.081475 9.974874)" width="16" x="3" y="6"/%3E%3C/g%3E%3C/svg%3E');
|
|
}
|
|
.widget-accent-color-item input.radio:checked + .widget-color-circle:after {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
.widget-color-circle {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: #319BE6;
|
|
transition: background-color 0.12s ease, box-shadow 0.12s ease;
|
|
}
|
|
.widget-color-circle-custom {
|
|
background-color: #F5F5F5;
|
|
color: #F5F5F5;
|
|
}
|
|
.widget-accent-color-item input.radio + .widget-color-circle-custom:before {
|
|
position: absolute;
|
|
left: 0;
|
|
display: inline-block;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: top;
|
|
background: url('data:image/svg+xml,%3Csvg height="14" viewBox="0 0 15 14" width="15" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m3.9468491 8.55631162c-1.3103539 0-2.36810946 1.04207749-2.36810946 2.33300928 0 1.0187474-.91566899 1.5553396-1.57873964 1.5553396.72622023.9487571 1.96553085 1.5553395 3.15747928 1.5553395 1.7445073 0 3.15747928-1.3920289 3.15747928-3.1106791 0-1.29093179-1.05775556-2.33300928-2.36810946-2.33300928zm10.8222602-7.28676572-1.0577555-1.04207749c-.3078543-.30329121-.8051572-.30329121-1.1130115 0l-7.07275356 6.96792112 2.170767 2.13859186 7.07275356-6.96792112c.3078543-.30329121.3078543-.79322316 0-1.09651437z" fill="%23bdbdbd"/%3E%3C/svg%3E') no-repeat center;
|
|
transition: opacity 0.12s ease;
|
|
}
|
|
.widget-color-label {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
margin-top: 8px;
|
|
color: #333;
|
|
}
|
|
.widget-color-label-custom {
|
|
transition: opacity 0.12s ease;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.widget-accent-color-field-item {
|
|
transition: all .2s ease;
|
|
opacity: 0;
|
|
}
|
|
.widget-accent-color-field-item input.widget-accent-color-field {
|
|
font-size: 12px !important;
|
|
line-height: 14px !important;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
text-align: center;
|
|
margin-top: 3px !important;
|
|
padding: 5px 0 !important;
|
|
color: #222 !important;
|
|
width: 52px !important;
|
|
}
|
|
.widget-accent-color-item input.radio:checked ~ .widget-accent-color-field-item {
|
|
opacity: 1;
|
|
}
|
|
.widget-accent-color-item input.radio:checked ~ .widget-color-circle-custom {
|
|
background-color: currentColor !important;
|
|
}
|
|
.widget-accent-color-item input.radio:checked + .widget-color-circle-custom:before,
|
|
.widget-accent-color-item input.radio:checked ~ .widget-color-label-custom {
|
|
opacity: 0;
|
|
}
|