/* * ... ... .. .. .=*8888n.."%888: . uW8" x .d88" X ?8888f '8888 u. `t888 5888R 88x. '8888X 8888> ...ue888b 8888 . '888R .u '8888k 8888X '"*8h. 888R Y888r 9888.z88N 888R ud8888. "8888 X888X .xH8 888R I888> 9888 888E 888R :888'8888. `8" X888!:888X 888R I888> 9888 888E 888R d888 '88%" =~` X888 X888X 888R I888> 9888 888E 888R 8888.+" :h. X8*` !888X u8888cJ888 9888 888E 888R 8888L X888xX" '8888..: "*888*P" .8888 888" .888B . '8888c. .+ :~`888f '*888*" 'Y" `%888*%" ^*888% "88888% "" `"` "` "% "YP' * * * * Central Garden & Pet Web Admin * V1 * * TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Color Palette * 4.0 - Globals */ /********** 1.0 - Reset **********/ html, body { font-size: 100%; font-size: 16px; min-height: 100vh; height: 100%; width: 100%; scroll- behavior: smooth; } html { -ms-touch-action: manipulation; touch-action: manipulation; box-sizing: border-box; } body, body *, body *:before, body *:after { box-sizing: inherit; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-kerning: normal; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms- hyphens: auto; -moz-hyphens: auto; hyphens: auto; } /********** 2.0 - Fonts **********/ /* This shows completely different fonts than using in the */ /* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:ital,wght@0,400;0,500;0,700;1,400&family=Noto+Sans+Mono:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); */ /* !important ensures Bootstrap defaults get overridden */ body { font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Roboto", Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans Display", sans-serif !important; font-weight: 700 !important; } /*.font-monospace { font-family: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; }*/ /********** 3.0 - Color Palette **********/ /* Branding color variables */ :root { --aqueon-white: #fafafa; --platinum: #e3e3e3; --silver: #c0c0c0; --gray-web: #808080; --onyx: #444444; --rich-black: #121212; --aqueon-blue: #072e6d; --aqueon-orange: #ff6b00; --cgp-green: #057140; --zilla-green: #8CC63F; } .color--aqueon-white { color: var(--aqueon-white); } .color--platinum { color: var(--platinum); } .color--silver { color: var(--silver); } .color--gray-web { color: var(--gray-web); } .color--onyx { color: var(--onyx); } .color--rich-black { color: var(--rich-black); } .color--aqueon-blue { color: var(--aqueon-blue); } .color--aqueon-orange { color: var(--aqueon-orange); } .color--cgp-green { color: var(--cgp-green); } .color--zilla-green { color: var(--zilla-green); } .background-color--aqueon-white { background-color: var(--aqueon-white); } .background-color--platinum { background-color: var(--platinum); } .background-color--silver { background-color: var(--silver); } .background-color--gray-web { background-color: var(--gray-web); } .background-color--onyx { background-color: var(--onyx); } .background-color--rich-black { background-color: var(--rich-black); } .background-color--aqueon-blue { background-color: var(--aqueon-blue); } .background-color--aqueon-orange { background-color: var(--aqueon-orange); } .background-color--cgp-green { background-color: var(--cgp-green); } .background-color--zilla-green { background-color: var(--zilla-green); } /********** 4.0 - Globals **********/ hr { opacity: 100%; } .hr--platinum { color: var(--platinum); } .hr--silver { color: var(--silver); } .hr--gray-web { color: var(--gray-web); } .hr--onyx { color: var(--onyx); } /* Custom fish horizontal rule */ .hr--fish { position: relative; display: flex; justify-content: center; overflow: visible; color: var(--platinum); } .hr--fish:before { font-family:"Font Awesome 5 free"; content: "\f578"; font-weight: 900; font-size: 1.25rem; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--aqueon-white); color: var(--aqueon-orange); width: 2em; height: 2em; line-height: 2; border-radius: 100%; text-align: center; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); } /* making input/output controls larger */ .scale-1-5 { transform: scale(1.5); } .form-check-input { cursor: pointer; } .form-check-input:focus { border-color: var(--aqueon-orange); outline: 0; box-shadow: 0 0 0 .25rem rgba(255, 107, 0, .5); } .form-check-input:checked { background-color: var(--aqueon-blue); border-color: var(--aqueon-blue); } .offcanvas-backdrop { position: fixed; } #offcanvas--details .form-switch.form-check-reverse .form-check-input, #offcanvas--settings .form-switch.form-check-reverse .form-check-input { margin-right: -2em; } /* Make sure to show cursor change in areas users expect it to */ .pointer, a[class~=fa-]:before, a[class*=fa-]:before, button[class~=fa-]:before, button[class*=fa-]:before, button [class~=fa-]:before, button [class*=fa-]:before, label { cursor: pointer; } .offcanvas-body textarea.form-control { min-height: 100px; } /* Toggle password styling */ .togglePassword { margin-top: -8px; margin-left: -32px; cursor: pointer; } /* Hide progress bar, and reveal with JS */ .progress-bar-container { display: none; } /* Speed up Bootstrap animated progress bar animation */ .progress-bar-animated { -webkit-animation: .25s linear infinite progress-bar-stripes; animation: .25s linear infinite progress-bar-stripes; } /* A fix (Bootstrap override) for the dark bottom border on tables */ .table > :not(caption) > * > * { border-bottom-width: inherit; } /* allows unbreakable words to be broken to not break the table */ td, th { word-wrap: break-word; } th { white-space: nowrap; } /* DataTable styling tweaks */ .dataTables_length, .dataTables_filter { margin-bottom: 16px; } .dataTables_wrapper .dataTables_filter input { margin-left: 8px; } .dataTables_wrapper .dataTables_scroll { margin-bottom: 8px; } .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled, .current):hover, /*adding the following for IE support - https://caniuse.com/?search=%3Anot */ .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover { background: var(--aqueon-blue) !important; color: var(--aqueon-white) !important; border-radius: var(--bs-border-radius)!important; } table.dataTable.no-footer { border-bottom: transparent !important; height: 100%; } .DTFC_ScrollWrapper .DTFC_LeftBodyWrapper, .DTFC_ScrollWrapper .DTFC_RightBodyWrapper { box-shadow: 0 0px 10px 2px rgb(0 0 0 / 10%); } /* Raising specificity to override DataTable styling !important */ .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current, .table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--aqueon-blue) !important; color: var(--aqueon-white) !important; border-radius: var(--bs-border-radius)!important; border-color: transparent; } /* Remove styling on "active" button in pagination */ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { cursor: default; } /* Create more space between label and form field */ .dataTables_wrapper .dataTables_filter input { margin-left: 8px !important; } /* Make adjustments to table headers to affect cell size */ #dataTable-products th:last-child, #dataTable-users th:last-child, #dataTable-consumers th:last-child, #dataTable-fish th:first-child, table.dataTable .table-tools { width: 80px !important; min-width: 80px !important; max-width: 120px !important; } .no-sort { pointer-events: none !important; cursor: default !important; } .no-sort:after { display: none !important; } table.dataTable thead .no-sort.sorting { background-image: none; } table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > *, table.dataTable.stripe > tbody > tr.odd.selected > *, table.dataTable.display > tbody > tr.odd.selected > *, table.dataTable tbody tr.selected > * { box-shadow: none !important; } /* Add back bottom margin to scrollable table */ .DTFC_ScrollWrapper { margin-bottom: .5rem; } .or { position: relative; /*width: .2rem;*/ height: 2.5rem; font-size: 18px; } .or:before { content: 'or'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--platinum); width: 2.5rem; height: 2.5rem; line-height: 2; color: var(--onyx); font-style: normal; font-weight: 500; text-align: center; border-radius: 500px; } /* Bootstrap overrides and customization(s) */ .btn-link { text-decoration:none; } .btn-link:hover { text-decoration: underline; border: 1px solid rgba(7, 46, 109, .25); } .btn-primary { background-color: var(--aqueon-blue); border-color: var(--aqueon-blue); color: var(--aqueon-white); } .btn-primary:hover, .btn-primary:focus { background-color: var(--aqueon-orange); border-color: var(--aqueon-orange); color: var(--rich-black); } .btn--profile { font-size: 1.5rem; } .btn--profile, .btn--table-control { color: var(--aqueon-blue); } .btn--profile:hover, .btn--table-control:hover { background-color: var(--aqueon-orange); color: var(--aqueon-white); border-color: transparent; } .table-dark { --bs-table-bg: var(--aqueon-blue); color: var(--aqueon-white); } .page-link { color: var(--aqueon-blue); } .page-item.active .page-link { background-color: var(--aqueon-blue); border-color: var(--aqueon-blue); } .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link { color: var(--aqueon-white); } .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { background-color: var(--platinum); color: var(--rich-black); } [class*="card--"] { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--aqueon-blue); } .is-valid { color: #198754; background-color: rgba(25, 135, 84, 0.05); border-width: .125rem; } .is-invalid { color: #dc3545; background-color: rgba(220, 53, 69, 0.1); border-width: .125rem; } *:disabled { pointer-events: initial !important; cursor: not-allowed !important; } .overflow-y { overflow-y: scroll; } .progress--xs { height: 2px; } .progress--sm { height: 4px; } .progress--md { height: 8px; } .progress--lg { height: 16px; } .progress--xl { height: 24px; } .btn-outline-primary { --bs-btn-color: var(--aqueon-blue); --bs-btn-border-color: var(--aqueon-blue); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--aqueon-blue); --bs-btn-hover-border-color: var(--aqueon-blue); --bs-btn-focus-shadow-rgb: 13,110,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--aqueon-blue); --bs-btn-active-border-color: var(--aqueon-blue); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--aqueon-blue); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--aqueon-blue); --bs-gradient: none; } /* Bootstrap is broken/buggy, so had to re-write values for backdrop Examples on Bootstrap doc site use modal-backdrop, not offcanvas-backdrop...??? */ .offcanvas-backdrop { height: 100%; width: 100%; top:0; left:0; z-index: 1030; background-color: rgba(0, 0, 0, .5); } /* Get footer to stay at bottom of page */ body { display: flex; flex-direction: column; } footer { margin-top: auto; } .bg-primary { background-color: var(--aqueon-blue) !important; } .navbar-brand img { height: auto; max-width: 100%; width: 150px; } .nav-tabs { } .nav-tabs .nav-link:not(.active):focus, .nav-tabs .nav-link:not(.active):hover { background-color: var(--platinum); isolation: unset; } .nav-tabs .nav-link.active { cursor: default !important; background-color: var(--aqueon-blue); color: var(--aqueon-white); font-weight: 600; border-color: transparent; } .horizontal-overflow { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* .horizontal-overflow::-webkit-scrollbar { display: none; } */ .overflow-card { min-height: 288px; min-width: 288px; } .overflow-card:first-of-type { margin-left: 0 !important; } .overflow-card:last-of-type { margin-right: 0 !important; } .overflow-card .icon { max-height: 3rem; } /* Tweak to Bootstrap screen-reader only class * This will prevent a horizontal scrollbar across the entire body */ .horizontal-overflow .sr-only { position: fixed; }