Adding more things.
This commit is contained in:
parent
7c70bc0de7
commit
33ead115b9
@ -759,4 +759,64 @@ pre {
|
|||||||
|
|
||||||
code {
|
code {
|
||||||
display: block;
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container to line up radios nicely */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the default radio input */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type=radio] {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
border: 2px solid #6c9e9b; /* soft green border */
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f2f7f5; /* light background */
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover effect */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type=radio]:hover {
|
||||||
|
border-color: #4a7a77;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checked state with a modern filled circle */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type=radio]:checked {
|
||||||
|
border-color: #4a7a77;
|
||||||
|
background: #6c9e9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type=radio]:checked::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label styling */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset .form-item {
|
||||||
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
@ -102,3 +102,64 @@ pre {
|
|||||||
code {
|
code {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Container to line up radios nicely */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the default radio input */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type="radio"] {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
border: 2px solid #6c9e9b; /* soft green border */
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f2f7f5; /* light background */
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover effect */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type="radio"]:hover {
|
||||||
|
border-color: #4a7a77;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checked state with a modern filled circle */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type="radio"]:checked {
|
||||||
|
border-color: #4a7a77;
|
||||||
|
background: #6c9e9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset input[type="radio"]:checked::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Label styling */
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset label {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#views-exposed-form-snippets-block-1 fieldset .form-item {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user