.del__pagination {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
.del__pagination a,
.del__pagination span {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--color-extralightgray);
color: var(--color-darkgray);
margin-left: 0.25rem;
margin-right: 0.25rem;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--number-font);
flex-direction: column;
}
.del__pagination a.current,
.del__pagination span.current {
background-color: var(--color-green);
color: white;
}
.del__pagination a:hover {
background-color: var(--color-lightgray);
}
.del__pagination ul {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
} .del__category {
display: flex;
flex-direction: column;
}
.del__category h1 {
font-size: var(--size-text-xxl);
font-weight: 300;
margin-top: 1rem;
}
.del__category .del__s_desc {
margin-bottom: 2rem;
font-size: var(--size-text-m-1);
} .del__category > .del__s_cols {
display: flex;
flex-direction: row;
gap: 1rem;
}
.del__category > .del__s_cols > .del__s_right {
flex-grow: 1;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort {
display: flex;
flex-direction: row;
margin-bottom: 0.5rem;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_name {
flex-grow: 1;
font-size: var(--size-text-m-1);
font-weight: 600;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_sortlist {
display: flex;
flex-direction: row;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_sortlist a {
display: flex;
margin-left: 1.5rem;
border-bottom: 1px dashed var(--color-gray);
color: var(--color-gray);
font-size: var(--size-text-m);
font-weight: 400;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_sortlist a.del__s_active{
border-bottom: 1px dashed var(--color-green);
color: var(--color-green);
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_sortlist a i {
padding-left: 0.5rem;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort .del__s_sortlist a.del__s_reverce i {
transform:rotatez(180deg);
padding-left: 0;
padding-right: 0.5rem;
}
.del__category .del__project .del__s_inner .del__s_price .del__s_number span:first-child,
.del__category .del__project .del__s_inner .del__s_price .del__s_number span:last-child {
font-size: var(--size-text-m-3);
} .del__category > .del__s_cols > .del__s_left {
min-width: 250px;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter {
background-color: var(--color-extralightgray);
padding: 1rem;
border-radius: 0.5rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_group {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_group .del__s_name {
font-weight: 600;
font-size: var(--size-text-m-1);
padding-bottom: 0.5rem;
position: relative;
display: flex;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_colapse .del__s_name {
cursor: pointer;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_colapse .del__s_name:after {
content: "\f078";
font-family: "Font Awesome 5 Free";
display: inline-block;
flex-grow: 1;
text-align: right;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_colapse.del__s_active .del__s_name:after {
transform: rotateX(180deg);
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_colapse .st_s_inputs {
height: 0;
overflow: hidden;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .del__s_colapse.del__s_active .st_s_inputs {
height: auto;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.st_s_range .del__s_slide {
margin: 0.5rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.st_s_range .del__s_slide_range {
display: flex;
flex-direction: row;
gap: 1rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.st_s_range .del__s_slide_range input {
flex: 1 1 50%;
width: 100%;
font-size: var(--size-text-m);
color: #333;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
font-family: var(--number-font);
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.del__s_check .del__checkbox_alt {
font-size: var(--size-text-m);
color: #333;
cursor: pointer;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.del__s_check {
display: flex;
flex-direction: row;
gap: 0.25rem;
align-items: center;
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid lightgrey;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.del__s_check .del__checkbox {
background-color: #ddd;
border: 1px solid #ccc;
}
.del__category > .del__s_cols > .del__s_left .del__s_filter .st_s_input.del__s_check input[type="checkbox"]:checked + .del__checkbox {
background-color: var(--color-green);
border: 1px solid #ccc;
} .del__category > .del__s_cols > .del__s_left .del__s_controls {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_controls .del__s_apply a {
font-size: var(--size-text-m);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-green);
color: white;
border: none;
cursor: pointer;
width: 100%;
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 1rem;
}
.del__category > .del__s_cols > .del__s_left .del__s_controls .del__s_clear a {
font-size: var(--size-text-m);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-darkgray);
border: none;
cursor: pointer;
width: 100%;
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 1rem;
}
@media only screen and (max-width: 1280px) {
.del__category {
padding-left: 1rem;
padding-right: 1rem;
}
.del__category .del__project_grid > .del__project {
flex: 0 0 33.33%;
}
.del__project .del__s_inner .del__s_price .del__s_number span:first-child {
font-size: var(--size-text-m-3);
}
}
@media only screen and (max-width: 1280px) {
.del__category > .del__s_cols > .del__s_left {
position: fixed;
transform: translateX(-100%);
}
.del__category .del__project_grid > .del__project {
flex: 0 0 33.33%;
margin-bottom: 1rem;
}
.del__category > .del__s_tags > .del__s_group {
flex-direction: column;
}
.del__category > .del__s_tags > .del__s_group > .del__s_name {
margin-bottom: 0.5rem;
}
.del__category > .del__s_cols > .del__s_right .del__s_sort {
margin-bottom: 1rem;
}
}
@media only screen and (max-width: 960px) {
.del__category .del__project_grid > .del__project {
flex: 0 0 100%;
margin-bottom: 1rem;
}
} .del__filter_widget {
display: none;
}
.del__filter_header_mobile {
display: none;
}
@media (max-width: 960px) {
.del__filter_widget {
display: block;
position: fixed;
left: 0;
top: 50%;
background: var(--color-green);
padding: 1rem;
z-index: 500;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: pointer;
}
.del__category > .del__s_cols{
display: unset;
}
.del__filter_widget i {
color: white;
}
.del__category .del__s_left.del__s_active {
transform: translateX(0);
}
.del__category .del__s_left {
position: fixed;
transition: all 0.3s ease-in-out;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
opacity: 1;
width: 100%;
z-index: 500;
overflow-y: scroll;
background: var(--color-extralightgray);
}
.del__category > .del__s_cols > .del__s_left .del__s_filter {
width: 100%;
}
.del__filter_header_mobile {
display: flex;
flex-direction: row;
}
}