/*! Theme Name: Stock-Fit Author: Anton Slobodyanyuk Description: Theme for the Stock-Fit Application Version: 1.0.7 License: GPLv3 License URI: ./LICENSE Filename: style.css */ /* ========================================================================== 1. CORE & BRANDING VARIABLES ========================================================================== */ :root { --sf-primary-blue: #007bff; --sf-dark-blue: #003366; --sf-light-gray: #f8f9fa; --sf-text-color: #333; --sf-border-color: #dee2e6; --sf-white: #ffffff; --sf-footer-bg: #212529; --sf-footer-text: #adb5bd; } /* ========================================================================== 2. GLOBAL STYLES & TYPOGRAPHY ========================================================================== */ body { font-family: 'CiscoSans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--sf-light-gray); color: var(--sf-text-color); margin: 0; } .site-container { max-width: 97%; margin: 0 auto 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background-color: var(--sf-white); border: 1px solid var(--sf-border-color); } h1, h2, h3, h4, h5, h6 { font-weight: 500; color: var(--sf-dark-blue); } a { color: var(--sf-primary-blue); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--sf-dark-blue); } /* ========================================================================== 3. HEADER & NAVIGATION ========================================================================== */ #header { padding: 1rem 2.5rem; border-bottom: 1px solid var(--sf-border-color); } #header .nav.container-cmx { display: flex; align-items: center; justify-content: space-between; width: 100%; } #header .nav-header { flex-shrink: 0; } #header .custom-logo { max-height: 50px; width: auto; display: block; } #header .nav-links { display: flex; justify-content: flex-end; } #primary-menu { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0; } #primary-menu > .nav-item { position: relative; margin-left: 1.5rem; } #primary-menu > .menu-item-has-children { display: flex; align-items: center; gap: 0.4rem; } #primary-menu .nav-link { color: var(--sf-text-color); font-size: 16px; font-weight: 500; padding: 0.5rem 0; transition: color 0.2s ease; white-space: nowrap; } #primary-menu > .nav-item:hover > .nav-link, #primary-menu > .nav-item:hover > .sub-arrow { color: var(--sf-primary-blue); } #primary-menu .sub-arrow { transition: color 0.2s ease; } #primary-menu .sub-menu { visibility: hidden; opacity: 0; position: absolute; left: 0; top: 100%; margin-top: 10px; background-color: var(--sf-white); border: 1px solid var(--sf-border-color); list-style: none; padding: 0.5rem 0; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); z-index: 1000; min-width: 220px; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out; transform: translateY(10px); } #primary-menu .menu-item-has-children:hover > .sub-menu { visibility: visible; opacity: 1; transform: translateY(0); } #primary-menu .sub-menu a { display: block; padding: 0.6rem 1.2rem; white-space: nowrap; color: var(--sf-text-color); } #primary-menu .sub-menu a:hover { background-color: var(--sf-light-gray); color: var(--sf-primary-blue); } /* ========================================================================== 4. MAIN CONTENT & DASHBOARD ========================================================================== */ /* * To achieve a main browser horizontal scrollbar for wide tables, we must ensure * that no parent container between the table and the clips the content. * The following rules force the main content containers to allow overflow. */ #page, #content, #primary, .site-content, .site-main { overflow-x: visible !important; /* Use !important to override potential theme/plugin conflicts */ } .site-main { padding: 2.5rem; /* The overflow-x property was moved to the rule block above */ } /* Ensure intermediate containers don't clip the overflow */ .site-main > article.hentry, .site-main .entry-content { overflow: visible; } .entry-content .card { border: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .entry-content .card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } /* ========================================================================== 5. SINGLE POST STYLES ========================================================================== */ .middle-row .blog-box { position: relative; border: 2px solid var(--sf-primary-blue); border-radius: 10px; padding: 15px; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; } .middle-row .blog-box:hover { box-shadow: 0 0 15px rgba(0, 123, 255, 0.5); transform: translateY(-5px); } /* ========================================================================== 6. FOOTER & UTILITIES ========================================================================== */ #footer { background-color: #29B6F6; color: #ffffff; padding: 1.5rem 2.5rem; margin-top: 2rem; position: relative; } #footer h4 { color: var(--sf-white); font-weight: 500; margin-bottom: 1.5rem; } #footer ul { list-style: none; padding: 0; margin: 0; } #footer a { color: #ffffff; line-height: 2; } #footer a:hover { color: rgba(255, 255, 255, 0.8); } #footer .social-icons { display: flex; gap: 1rem; padding: 0; margin: 0; justify-content: flex-end; } #footer .social-icons a { display: inline-block; color: #ffffff; font-size: 1.5rem; transition: transform 0.2s ease, color 0.2s ease; } #footer .social-icons a:hover { color: #ffffff; transform: scale(1.1); } #footer .copyrights { display: flex; justify-content: space-between; align-items: center; } #scroll-top { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); z-index: 999; } /* ========================================================================== 7. STOCK-FIT PLUGIN & TABULATOR STYLES ========================================================================== */ /* --- General Table Styles --- */ .stock-fit-table-wrapper .tabulator-row .tabulator-cell { padding-top: 6px; padding-bottom: 6px; font-size: 0.85rem; } .stock-fit-table-wrapper .tabulator-header .tabulator-col-title { font-size: 0.9rem; } .stock-fit-table-wrapper .tabulator-footer .tabulator-paginator { font-size: 0.85rem; } .stock-fit-table-wrapper .tabulator-footer .sf-footer-info { margin-left: auto; padding-left: 20px; font-size: 0.85rem; font-weight: 500; } .sf-outdated-row { background-color: #F8D7DA !important; color: #58151D !important; } .sf-outdated-row:hover { background-color: #F1C2C7 !important; } /* --- Styles for UNIFORM Tabulator Header Filters --- */ .tabulator .tabulator-header .tabulator-header-filter > *, .tabulator .tabulator-header .tabulator-header-filter .sf-composite-filter, .tabulator .tabulator-header .tabulator-header-filter .sf-text-filter { height: 31px; box-sizing: border-box; } .sf-composite-filter, .sf-text-filter { display: flex; align-items: center; width: 100%; border: 1px solid #dee2e6; border-radius: 4px; } .sf-composite-filter select, .sf-composite-filter input, .sf-text-filter .mode-selector, .sf-text-filter input { height: 100%; padding: 2px 6px; font-size: 0.8rem; border: none; background-color: transparent; } .sf-composite-filter select, .sf-text-filter .mode-selector { border-right: 1px solid #dee2e6; flex-shrink: 0; } .sf-composite-filter input, .sf-text-filter input { width: 100%; } .sf-composite-filter input:focus, .sf-composite-filter select:focus, .sf-text-filter .mode-selector:focus, .sf-text-filter input:focus { outline: none; box-shadow: none; } .sf-composite-filter input[type='number']::-webkit-outer-spin-button, .sf-composite-filter input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sf-composite-filter input[type='number'] { -moz-appearance: textfield; } /* --- Full Width Table & Scrolling Adjustment --- */ .site-main .stock-fit-table-wrapper { margin-left: -2.5rem; margin-right: -2.5rem; } /* Add padding back to the controls so they align with the page title */ .site-main .stock-fit-table-wrapper > .d-flex, .site-main .stock-fit-table-wrapper .tabulator-footer { padding-left: 2.5rem; padding-right: 2.5rem; } /* Disable Tabulator's internal horizontal scroller so the parent can handle it */ .tabulator .tabulator-tableholder, .tabulator .tabulator-header, .tabulator .tabulator-tableholder .tabulator-table { overflow-x: visible !important; } /* ========================================================================== 8. MISC & UTILITY CLASSES ========================================================================== */ /* * This class is added via JavaScript to the tag when the Tabulator table's * width exceeds the viewport width. It forces the browser's main horizontal * scrollbar to appear, bypassing any intermediate containers that might be * clipping the overflow. */ body.sf-table-overflowing { overflow-x: auto !important; } .sf-hidden { display: none; } .sf-switch { position: relative; display: inline-block; width: 40px; height: 20px; vertical-align: middle; } .sf-switch input { opacity: 0; width: 0; height: 0; } .sf-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; } .sf-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .sf-slider { background-color: var(--sf-primary-blue); } input:focus + .sf-slider { box-shadow: 0 0 1px var(--sf-primary-blue); } input:checked + .sf-slider:before { transform: translateX(20px); }