FSST/Geizkragen
FSST/Geizkragen
2
0
Fork 0
Code Issues Projects 1 Releases 1 Wiki Activity
20f9b444cd
Geizkragen/assets/css/catbar.css

396 lines
10 KiB
CSS
Raw Blame History

/**
* @file catbar.css
* @brief This stylesheet defines the styling for the category navigation bar and the attribute filter bar.
* It includes styles for navigation items, active/hover states, responsiveness, and filter form components.
* @author Geizkragen Project
*/
/**
* ==========================================================
* CATEGORY BAR
* ==========================================================
*/
/**
* @class .home-nav
* @brief Main container for the home navigation bar.
* Provides the background color, padding, and flexbox layout.
*/
.home-nav {
width: 100%;
display: flex;
align-items: center;
background-color: #2d3b50;
padding: 1px 0;
}
/**
* @class .home-nav__inner
* @brief Inner wrapper for the home navigation bar.
* Ensures the content expands and is centered correctly using flexbox properties.
*/
.home-nav__inner {
flex: 1;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/**
* @class .home-nav__list
* @brief Represents the unordered list containing the navigation links.
* Removes default list styling and sets up a horizontal flexbox container.
*/
.home-nav__list {
width: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
/**
* @selector .home-nav__list li
* @brief Defines the list items inside the navigation list.
* Acts as a relative container for flex items.
*/
.home-nav__list li {
flex: 1;
position: relative;
}
/**
* ===============================
* HOME CATEGORY LINKS
* ===============================
*/
/**
* @selector .home-nav__list li a
* @brief Styles the anchor tags inside the list items.
* Sets up dimensions, padding, colors, font styling, and transitions for hover effects.
*/
.home-nav__list li a {
width: 100%;
padding: 8px 0;
background-color: rgb(45, 59, 80);
color: #ffffff;
font-weight: 600;
font-size: 0.9rem;
font-family: var(--font-family);
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: background-color 0.2s ease;
}
/**
* @selector .home-nav__list li a:hover
* @brief Defines the hover state for the navigation links.
* Applies a subtle white overlay using rgba.
*/
.home-nav__list li a:hover {
background-color: rgba(255,255,255,0.18);
}
/**
* @selector .home-nav__list li a:active
* @brief Defines the active (mouse click down) state for the navigation links.
* Increases the opacity of the white overlay for visual feedback.
*/
.home-nav__list li a:active {
background-color: rgba(255,255,255,0.28);
}
/**
* @selector .home-nav__list li a:focus-visible
* @brief Defines the focus state, mainly for keyboard navigation accessibility.
* Removes the default outline and adds a bespoke white box-shadow inset.
*/
.home-nav__list li a:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
}
/**
* @selector .home-nav__list li a.active
* @brief Styles the currently active category link, typically set server-side via PHP or by JS.
*/
.home-nav__list li a.active {
background-color: rgba(255,255,255,0.25);
}
/**
* ===============================
* TRENNSTRICHE ZWISCHEN KATEGORIEN
* ===============================
*/
/**
* @selector .home-nav__list li:not(:last-child)::after
* @brief Creates vertical separator lines between category items,
* except after the last item in the list.
*/
.home-nav__list li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2px;
background-color: rgba(255,255,255,0.3);
}
/**
* @media (max-width: 768px)
* @brief Responsive styles for mobile and small tablet screens.
* Enables horizontal scrolling for the category list with smooth scroll-snapping.
*/
@media (max-width: 768px) {
.home-nav__inner {
justify-content: flex-start;
}
.home-nav__list {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.home-nav__list::-webkit-scrollbar { display: none; }
.home-nav__list li {
flex: 0 0 auto;
scroll-snap-align: start;
}
.home-nav__list li a {
padding: 8px 16px;
font-size: 0.82rem;
min-height: 40px;
}
}
@media (max-width: 480px) {
.home-nav__list li a {
padding: 8px 12px;
font-size: 0.78rem;
min-height: 36px;
}
}
@media (min-width: 1024px) {
.home-nav__item a {
font-size: 1rem;
padding: 5px 24px;
}
}
/**
* ==========================================================
* ATTRIBUTE FILTER BAR
* ==========================================================
*/
/**
* @class .attrbar
* @brief Main container for the attribute filtering section.
* Matches the background color of the category bar and provides bottom padding.
*/
.attrbar {
width: 100%;
background-color: rgb(45, 59, 80); /* Same as catbar background */
padding: 0 0 16px 0;
}
/**
* @class .attrbar__inner
* @brief Inner container for the filter bar.
* Includes top padding and a subtle top border to separate it from the category links above.
*/
.attrbar__inner {
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 16px;
width: 100%;
}
/**
* @class .attr-filter-form
* @brief Wrapper for the filter form components.
* Uses flexbox wrap to display filter items fluidly, aligning them appropriately across widths.
*/
.attr-filter-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end; /* Align inputs and labels beautifully */
justify-content: center;
width: 100%;
max-width: 100%; /* Changed from 1200px to allow full width */
margin: 0 auto;
padding: 0 20px;
}
/**
* @class .attr-filter-item
* @brief Container for a single filter component (e.g. property label + dropdown).
* Lays out child elements in a flex column.
*/
.attr-filter-item {
display: flex;
flex-direction: column; /* Stack label and select */
align-items: flex-start;
gap: 6px;
font-size: 0.85rem;
color: var(--text-secondary, #cbd5e1);
font-family: var(--font-family);
flex: 1 1 180px; /* Grid-like flexibility */
max-width: 250px;
}
/**
* @selector .attr-filter-item label
* @brief Styles the label text above each dropdown within the filter items.
* Uses uppercase text, smaller font size, and light spacing.
*/
.attr-filter-item label {
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
}
/**
* @selector .attr-filter-item select
* @brief Styles the select (dropdown) inputs in the filter bar.
* Removes default webkit/moz appearance and replaces it with custom backgrounds, borders, and a custom SVG arrow.
*/
.attr-filter-item select {
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md, 5px);
background-color: rgba(25, 30, 40, 0.5); /* Semi transparent dark */
color: var(--text-primary, #ffffff);
cursor: pointer;
font-size: 0.9rem;
font-family: var(--font-family);
transition: all var(--transition-fast, 150ms ease);
appearance: none; /* modern look */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.6)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
/**
* @selector .attr-filter-item select:hover
* @brief Hover state for the select elements, adjusting background and border color.
*/
.attr-filter-item select:hover {
background-color: rgba(25, 30, 40, 0.8);
border-color: rgba(255, 255, 255, 0.3);
}
/**
* @selector .attr-filter-item select:focus
* @brief Focus state for the select elements, applying primary color highlights.
*/
.attr-filter-item select:focus {
outline: none;
border-color: var(--color-primary, #274a97);
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(39, 74, 151, 0.15));
}
/**
* @selector .attr-filter-item select option
* @brief Styles the option elements inside the dropdown.
* Sets background and text colors to match the dark theme.
*/
.attr-filter-item select option {
background-color: var(--bg-surface, #2d3b50);
color: var(--text-primary, #ffffff);
}
/**
* @class .attr-filter-action
* @brief Container for form action elements, like the reset button.
* Aligns to the bottom to match the input fields structurally.
*/
.attr-filter-action {
display: flex;
align-items: flex-end;
padding-bottom: 2px; /* optical alignment with inputs */
}
/**
* @class .attr-filter-reset
* @brief Styles for the filter reset button.
* Provides an inline-flex layout with a distinct danger (red) color scheme and hover effects.
*/
.attr-filter-reset {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-invert, #ffffff);
text-decoration: none;
padding: 10px 16px;
border: none;
border-radius: var(--radius-md, 5px);
background-color: var(--color-danger, #d92d20);
transition: all var(--transition-fast, 150ms ease);
font-family: var(--font-family);
height: 40px; /* match select height */
}
/**
* @selector .attr-filter-reset:hover
* @brief Hover state for the reset button.
* Creates a slight lift effect using transform and adds a shadow.
*/
.attr-filter-reset:hover {
background-color: #b91c1c; /* slightly darker danger */
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--color-danger-soft, rgba(217, 45, 32, 0.2));
}
/**
* @media (max-width: 768px)
* @brief Adjustments to the attribute filter layout for mobile and tablet devices.
* Forces items to take up near-half width or full width, and correctly spaces action buttons.
*/
@media (max-width: 768px) {
.attr-filter-item {
flex: 1 1 45%;
max-width: none;
}
.attr-filter-action {
width: 100%;
justify-content: center;
margin-top: 8px;
}
.attr-filter-reset {
width: 100%;
}
}
Reference in New Issue View Git Blame Copy Permalink