/* ██████ ██ ███ ██ ██ ██ ████████ ██ ██ ███████ ███ ███ ███████ ██ ██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██████ ██ ██ ██ ██ █████ ██ ███████ █████ ██ ████ ██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ██ ██ ███████ ██ ██ ███████ */ /* Customize button colors for light theme only */ html[data-bs-theme="light"] { /* Background and text colors */ --bs-body-bg: #fcdde8; /* Pink Background */ --bs-body-color: #660033; /* Dark Text Color */ /* Core theme colors */ --bs-primary: #ff66b2; /* Primary Pink */ --bs-primary-rgb: 255, 102, 178; --bs-secondary: #ff99cc; /* Secondary Pink */ --bs-secondary-rgb: 255, 153, 204; --bs-success: #ff80c2; /* Success Pink */ --bs-success-rgb: 255, 128, 194; --bs-info: #ffcce6; /* Info Pink */ --bs-info-rgb: 255, 204, 230; --bs-warning: #ffe6f2; /* Warning Pink */ --bs-warning-rgb: 255, 230, 242; --bs-danger: #ff3399; /* Danger Pink */ --bs-danger-rgb: 255, 51, 153; --bs-light: #ffe6f2; /* Light Pink */ --bs-light-rgb: 255, 230, 242; --bs-dark: #660033; /* Dark Text Color */ --bs-dark-rgb: 102, 0, 51; --bs-secondary-bg: #ffb6c1; /* Light pink for secondary background */ --bs-tertiary-bg: #ffc0cb; /* Slightly lighter pink for tertiary background */ /* HR Styling for Pink Theme in Light Mode */ --bs-hr-color: #f14861; /* Light pink color */ /* Button focus shadow color */ --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); /* Primary button variables */ --bs-btn-primary-color: #fff; --bs-btn-primary-bg: var(--bs-primary); --bs-btn-primary-border-color: var(--bs-primary); --bs-btn-primary-hover-color: #fff; --bs-btn-primary-hover-bg: #ff3399; /* Hover background */ --bs-btn-primary-hover-border-color: #ff3399; /* Hover border */ --bs-btn-primary-active-color: #fff; --bs-btn-primary-active-bg: var(--bs-primary); --bs-btn-primary-active-border-color: var(--bs-primary); --bs-btn-primary-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Secondary button variables */ --bs-btn-secondary-color: #660033; --bs-btn-secondary-bg: var(--bs-secondary); --bs-btn-secondary-border-color: var(--bs-secondary); --bs-btn-secondary-hover-color: #660033; --bs-btn-secondary-hover-bg: #ff80b3; --bs-btn-secondary-hover-border-color: #ff80b3; --bs-btn-secondary-active-color: #660033; --bs-btn-secondary-active-bg: var(--bs-secondary); --bs-btn-secondary-active-border-color: var(--bs-secondary); --bs-btn-secondary-focus-shadow-rgb: var(--bs-secondary-rgb); --bs-btn-secondary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Success button variables */ --bs-btn-success-color: #660033; --bs-btn-success-bg: var(--bs-success); --bs-btn-success-border-color: var(--bs-success); --bs-btn-success-hover-color: #660033; --bs-btn-success-hover-bg: #ff99c2; --bs-btn-success-hover-border-color: #ff99c2; --bs-btn-success-active-color: #660033; --bs-btn-success-active-bg: var(--bs-success); --bs-btn-success-active-border-color: var(--bs-success); --bs-btn-success-focus-shadow-rgb: var(--bs-success-rgb); --bs-btn-success-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Danger button variables */ --bs-btn-danger-color: #fff; --bs-btn-danger-bg: var(--bs-danger); --bs-btn-danger-border-color: var(--bs-danger); --bs-btn-danger-hover-color: #fff; --bs-btn-danger-hover-bg: #cc0066; --bs-btn-danger-hover-border-color: #cc0066; --bs-btn-danger-active-color: #fff; --bs-btn-danger-active-bg: var(--bs-danger); --bs-btn-danger-active-border-color: var(--bs-danger); --bs-btn-danger-focus-shadow-rgb: var(--bs-danger-rgb); --bs-btn-danger-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Warning button variables */ --bs-btn-warning-color: #660033; --bs-btn-warning-bg: var(--bs-warning); --bs-btn-warning-border-color: var(--bs-warning); --bs-btn-warning-hover-color: #660033; --bs-btn-warning-hover-bg: #ffd6e0; /* Adjusted hover color */ --bs-btn-warning-hover-border-color: #ffd6e0; --bs-btn-warning-active-color: #660033; --bs-btn-warning-active-bg: var(--bs-warning); --bs-btn-warning-active-border-color: var(--bs-warning); --bs-btn-warning-focus-shadow-rgb: var(--bs-warning-rgb); --bs-btn-warning-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Info button variables */ --bs-btn-info-color: #660033; --bs-btn-info-bg: var(--bs-info); --bs-btn-info-border-color: var(--bs-info); --bs-btn-info-hover-color: #660033; --bs-btn-info-hover-bg: #ffb3d9; /* Adjusted hover color */ --bs-btn-info-hover-border-color: #ffb3d9; --bs-btn-info-active-color: #660033; --bs-btn-info-active-bg: var(--bs-info); --bs-btn-info-active-border-color: var(--bs-info); --bs-btn-info-focus-shadow-rgb: var(--bs-info-rgb); --bs-btn-info-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Light button variables */ --bs-btn-light-color: #660033; --bs-btn-light-bg: var(--bs-light); --bs-btn-light-border-color: #ff99cc; --bs-btn-light-hover-color: #660033; --bs-btn-light-hover-bg: #ffccd5; --bs-btn-light-hover-border-color: #ffccd5; --bs-btn-light-active-color: #660033; --bs-btn-light-active-bg: var(--bs-light); --bs-btn-light-active-border-color: var(--bs-light); --bs-btn-light-focus-shadow-rgb: var(--bs-light-rgb); --bs-btn-light-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Dark button variables */ --bs-btn-dark-color: #fff; --bs-btn-dark-bg: var(--bs-dark); --bs-btn-dark-border-color: var(--bs-dark); --bs-btn-dark-hover-color: #fff; --bs-btn-dark-hover-bg: #4d0026; --bs-btn-dark-hover-border-color: #4d0026; --bs-btn-dark-active-color: #fff; --bs-btn-dark-active-bg: var(--bs-dark); --bs-btn-dark-active-border-color: var(--bs-dark); --bs-btn-dark-focus-shadow-rgb: var(--bs-dark-rgb); --bs-btn-dark-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Outline primary button variables */ --bs-btn-outline-primary-color: var(--bs-primary); --bs-btn-outline-primary-border-color: var(--bs-primary); --bs-btn-outline-primary-hover-color: #fff; --bs-btn-outline-primary-hover-bg: var(--bs-primary); --bs-btn-outline-primary-hover-border-color: var(--bs-primary); --bs-btn-outline-primary-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-outline-primary-active-color: #fff; --bs-btn-outline-primary-active-bg: var(--bs-primary); --bs-btn-outline-primary-active-border-color: var(--bs-primary); --bs-btn-outline-primary-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Base button variables */ --bs-btn-color: var(--bs-btn-primary-color); --bs-btn-bg: var(--bs-btn-primary-bg); --bs-btn-border-color: var(--bs-btn-primary-border-color); --bs-btn-hover-color: var(--bs-btn-primary-hover-color); --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color); --bs-btn-active-color: var(--bs-btn-primary-active-color); --bs-btn-active-bg: var(--bs-btn-primary-active-bg); --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Universal Link Color for Pink Theme */ --bs-link-color: var(--bs-body-color); /* Use body color for links */ --bs-link-hover-color: #b3005e; /* Slightly darker pink for hover effect */ /* Form input and button colors */ --bs-input-bg: var(--bs-body-bg); /* Light input background */ --bs-input-border-color: #ff66b2; /* Input border color */ --bs-button-color: #660033; /* Button text color */ --bs-button-bg: #ff66b2; /* Button background color */ --bs-button-hover-bg: #ff3399; /* Button hover background */ /* Nav Tabs colors for Pink Theme */ --bs-nav-tabs-border-width: 1px; --bs-nav-tabs-border-color: #ff99cc; /* Pink border for the tab container */ --bs-nav-tabs-border-radius: 0.25rem; /* Slightly rounded corners */ --bs-nav-tabs-link-hover-border-color: #ffccd5 #ffccd5 #ff99cc; /* Pink border on hover */ --bs-nav-tabs-link-active-color: #660033; /* Dark pink text color for active tab */ --bs-nav-tabs-link-active-bg: transparent; /* Transparent background for active tab */ --bs-nav-tabs-link-active-border-color: #ff99cc #ff99cc transparent; /* Pink border for active tab, no bottom border */ /* Dropdown Menu Color Variables for Pink Theme */ --bs-dropdown-color: var(--bs-body-color); /* Text color for dropdown */ --bs-dropdown-bg: var(--bs-body-bg); /* Background color for dropdown */ --bs-dropdown-border-color: #ff99cc; /* Pink border color */ --bs-dropdown-link-color: var(--bs-body-color); /* Text color for dropdown links */ --bs-dropdown-link-hover-color: var(--bs-body-color); /* Hover text color */ --bs-dropdown-link-hover-bg: #ffd6e0; /* Slightly darker pink background on hover */ --bs-dropdown-link-active-color: #f8d8e5; /* Light pink for active text */ --bs-dropdown-link-active-bg: #ff66b2; /* Active background color */ --bs-dropdown-link-disabled-color: #6c757d; /* Muted gray for disabled items */ --bs-dropdown-divider-bg: #ff99cc; /* Pink divider color */ --bs-dropdown-header-color: #6c757d; /* Muted gray for dropdown headers */ /* Link and tab colors */ --bs-link-color: var(--bs-body-color); /* Use body color for links */ --bs-link-hover-color: #b3005e; /* Slightly darker pink for hover */ --bs-nav-link-color: var(--bs-link-color); /* Default nav link color */ --bs-nav-link-hover-color: #ff80b3; /* Slightly darker pink for nav hover */ /* Additional nav link padding */ --bs-nav-link-padding-x: 1rem; /* Horizontal padding */ --bs-nav-link-padding-y: 0.5rem; /* Vertical padding */ /* Form Control Colors */ --bs-form-control-bg: var(--bs-input-bg); /* Background color for inputs */ --bs-form-control-color: var(--bs-body-color); /* Text color for inputs */ --bs-form-control-border-color: var(--bs-input-border-color); /* Border color for inputs */ --bs-form-control-focus-border-color: var(--bs-input-border-color); /* Border color on focus */ --bs-form-control-focus-shadow: rgba(255, 102, 178, 0.5); /* Focus shadow color */ --bs-form-control-placeholder-color: #d72378; /* Placeholder color */ --bs-form-control-disabled-bg: #f8d8e5; /* Background color for disabled/readonly inputs */ --bs-form-control-disabled-color: #660033; /* Text color for disabled/readonly inputs */ --bs-form-control-disabled-border-color: #ff99cc; /* Border color for disabled/readonly inputs */ /* Checkbox and Switch Colors */ --bs-form-check-bg: #ffe6f2; /* Light pink background for unchecked */ --bs-form-check-border: #d72378; /* Border color for unchecked state */ --bs-form-check-checked-bg: #ff66b2; /* Darker pink for checked background */ --bs-form-check-checked-border-color: #d72378; /* Border color when checked */ --bs-form-check-focus-shadow: rgba(255, 102, 178, 0.5); /* Pink shadow on focus */ --bs-form-check-focus-border-color: #ff66b2; /* Border color on focus */ --bs-form-check-switch-handle-color: #ffffff; /* White handle for checked switch */ /* Striped Table Colors for Pink Theme */ --bs-table-bg: var(--bs-body-bg); /* Light background for table */ --bs-table-color: #660033; /* Dark text color for table */ --bs-table-border-color: #ff99cc; /* Border color for table cells */ --bs-table-accent-bg: #ffe6f2; /* Light pink for striped rows */ --bs-table-hover-color: #660033; /* Text color for hovered row */ --bs-table-hover-bg: #ffccd5; /* Slightly darker pink on hover */ /* Global Modal Color Variables for Light Mode */ --bs-modal-color: var(--bs-body-color); /* Text color */ --bs-modal-bg: var(--bs-body-bg); /* Background color */ --bs-modal-border-color: #ff99cc; /* Light pink border */ --bs-modal-header-border-color: var(--bs-modal-border-color); /* Header border color now references modal border color */ --bs-modal-header-border-width: var(--bs-border-width); /* Header border width */ --bs-modal-footer-bg: var(--bs-body-bg); /* Footer background */ --bs-modal-footer-border-color: var(--bs-modal-border-color); /* Footer border now also references modal border color */ --bs-modal-footer-border-width: var(--bs-border-width); /* Footer border width */ } /* HR Styling for Pink Theme in Light Mode */ html[data-bs-theme="light"] hr { --bs-hr-border-width: var(--bs-border-width); --bs-hr-opacity: 0.25; margin: 1rem 0; color: var(--bs-hr-color); border: 0; border-top: var(--bs-hr-border-width) solid var(--bs-hr-color); opacity: var(--bs-hr-opacity); } html[data-bs-theme="light"] a { color: var(--bs-link-color); text-decoration: none; /* Optional: remove underline by default */ } html[data-bs-theme="light"] a:hover, html[data-bs-theme="light"] a:focus { color: var(--bs-link-hover-color); /* Apply darker color on hover */ } /* Navbar Links Styling for Light Theme */ html[data-bs-theme="light"] .navbar a { color: var(--bs-body-color); /* Body color for navbar links */ text-decoration: none; /* Remove underline */ } html[data-bs-theme="light"] .navbar a:hover, html[data-bs-theme="light"] .navbar a:focus { color: var(--bs-link-hover-color); /* Pink theme hover color */ text-decoration: none; } /* Light Mode Dropdown Menu Styling for Pink Theme */ html[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-color: var(--bs-body-color); /* Text color for dropdown */ --bs-dropdown-bg: var(--bs-body-bg); /* Background color for dropdown */ --bs-dropdown-border-color: #ff99cc; /* Pink border color */ --bs-dropdown-link-color: var(--bs-body-color); /* Text color for dropdown links */ --bs-dropdown-link-hover-color: var(--bs-body-color); /* Hover text color */ --bs-dropdown-link-hover-bg: #ffd6e0; /* Hover background */ --bs-dropdown-link-active-color: #f8d8e5; /* Light pink for active text */ --bs-dropdown-link-active-bg: #ff66b2; /* Active background color */ --bs-dropdown-link-disabled-color: #6c757d; /* Muted gray for disabled items */ --bs-dropdown-divider-bg: #ff99cc; /* Divider color */ --bs-dropdown-header-color: #6c757d; /* Header text color */ /* Additional menu styling */ color: var(--bs-dropdown-color); background-color: var(--bs-dropdown-bg); border-color: var(--bs-dropdown-border-color); } /* Individual Dropdown Item Styling */ html[data-bs-theme="light"] .dropdown-item { color: var(--bs-dropdown-link-color); /* Link color */ background-color: transparent; /* Default transparent background */ } html[data-bs-theme="light"] .dropdown-item:hover, html[data-bs-theme="light"] .dropdown-item:focus { color: var(--bs-dropdown-link-hover-color); /* Hover text color */ background-color: var(--bs-dropdown-link-hover-bg); /* Hover background */ } html[data-bs-theme="light"] .dropdown-item.active, html[data-bs-theme="light"] .dropdown-item:active { color: var(--bs-dropdown-link-active-color); /* Active text color */ background-color: var(--bs-dropdown-link-active-bg); /* Active background */ text-decoration: none; } /* Disabled State */ html[data-bs-theme="light"] .dropdown-item.disabled, html[data-bs-theme="light"] .dropdown-item:disabled { color: var(--bs-dropdown-link-disabled-color); /* Disabled text color */ pointer-events: none; background-color: transparent; } /* Divider and Header Styling */ html[data-bs-theme="light"] .dropdown-divider { background-color: var(--bs-dropdown-divider-bg); /* Divider color */ } html[data-bs-theme="light"] .dropdown-header { color: var(--bs-dropdown-header-color); /* Header text color */ } /* Alert Box Customization */ html[data-bs-theme="light"] .alert-primary { background-color: var(--bs-primary); color: var(--bs-dark); border-color: var(--bs-primary); } html[data-bs-theme="light"] .alert-secondary { background-color: var(--bs-secondary); color: var(--bs-dark); border-color: var(--bs-secondary); } html[data-bs-theme="light"] .alert-success { background-color: var(--bs-success); color: var(--bs-dark); border-color: var(--bs-success); } html[data-bs-theme="light"] .alert-info { background-color: var(--bs-info); color: var(--bs-dark); border-color: var(--bs-info); } html[data-bs-theme="light"] .alert-warning { background-color: var(--bs-warning); color: var(--bs-dark); border-color: var(--bs-warning); } html[data-bs-theme="light"] .alert-danger { background-color: var(--bs-danger); color: var(--bs-light); border-color: var(--bs-danger); } html[data-bs-theme="light"] .alert-light { background-color: var(--bs-light); color: var(--bs-dark); border-color: var(--bs-secondary); } html[data-bs-theme="light"] .alert-dark { background-color: var(--bs-dark); color: var(--bs-light); border-color: var(--bs-dark); } /* Buttons */ /* Primary Button */ html[data-bs-theme="light"] .btn-primary { background-color: var(--bs-primary); color: var(--bs-light); border-color: var(--bs-primary); } html[data-bs-theme="light"] .btn-primary:hover, html[data-bs-theme="light"] .btn-primary:focus, html[data-bs-theme="light"] .btn-primary:active { background-color: var(--bs-button-hover-bg); border-color: var(--bs-button-hover-bg); } /* Secondary Button */ html[data-bs-theme="light"] .btn-secondary { background-color: var(--bs-secondary); color: var(--bs-dark); border-color: var(--bs-secondary); } html[data-bs-theme="light"] .btn-secondary:hover, html[data-bs-theme="light"] .btn-secondary:focus, html[data-bs-theme="light"] .btn-secondary:active { background-color: var(--bs-btn-secondary-hover-bg); border-color: var(--bs-btn-secondary-hover-border-color); } /* Success Button */ html[data-bs-theme="light"] .btn-success { background-color: var(--bs-success); color: var(--bs-dark); border-color: var(--bs-success); } html[data-bs-theme="light"] .btn-success:hover, html[data-bs-theme="light"] .btn-success:focus, html[data-bs-theme="light"] .btn-success:active { background-color: var(--bs-btn-success-hover-bg); border-color: var(--bs-btn-success-hover-border-color); } /* Info Button */ html[data-bs-theme="light"] .btn-info { background-color: var(--bs-info); color: var(--bs-dark); border-color: var(--bs-info); } html[data-bs-theme="light"] .btn-info:hover, html[data-bs-theme="light"] .btn-info:focus, html[data-bs-theme="light"] .btn-info:active { background-color: var(--bs-btn-info-hover-bg); border-color: var(--bs-btn-info-hover-border-color); } /* Warning Button */ html[data-bs-theme="light"] .btn-warning { background-color: var(--bs-warning); color: var(--bs-dark); border-color: var(--bs-warning); } html[data-bs-theme="light"] .btn-warning:hover, html[data-bs-theme="light"] .btn-warning:focus, html[data-bs-theme="light"] .btn-warning:active { background-color: var(--bs-btn-warning-hover-bg); border-color: var(--bs-btn-warning-hover-border-color); } /* Danger Button */ html[data-bs-theme="light"] .btn-danger { background-color: var(--bs-danger); color: var(--bs-dark); border-color: var(--bs-danger); } html[data-bs-theme="light"] .btn-danger:hover, html[data-bs-theme="light"] .btn-danger:focus, html[data-bs-theme="light"] .btn-danger:active { background-color: var(--bs-btn-danger-hover-bg); border-color: var(--bs-btn-danger-hover-border-color); } /* Light Button */ html[data-bs-theme="light"] .btn-light { background-color: var(--bs-light); color: var(--bs-dark); border-color: var(--bs-secondary); } html[data-bs-theme="light"] .btn-light:hover, html[data-bs-theme="light"] .btn-light:focus, html[data-bs-theme="light"] .btn-light:active { background-color: var(--bs-btn-light-hover-bg); border-color: var(--bs-btn-light-hover-border-color); } /* Dark Button */ html[data-bs-theme="light"] .btn-dark { background-color: var(--bs-dark); color: var(--bs-light); border-color: var(--bs-dark); } html[data-bs-theme="light"] .btn-dark:hover, html[data-bs-theme="light"] .btn-dark:focus, html[data-bs-theme="light"] .btn-dark:active { background-color: var(--bs-btn-dark-hover-bg); border-color: var(--bs-btn-dark-hover-border-color); } /* Week Separators */ html[data-bs-theme="light"] .weekSeparator.custom-week-header { background-color: var(--bs-week-separator-bg); /* Light pink background */ padding: 0.5em 1em; text-align: center; margin: 1em 0; } html[data-bs-theme="light"] .custom-week-title, html[data-bs-theme="light"] .custom-week-range { color: var(--bs-week-separator-text-color); /* Dark text for readability on light pink background */ } /* Checkbox and Switch Customization */ html[data-bs-theme="light"] .form-check-input { background-color: var(--bs-form-check-bg); /* Light pink background for unchecked */ border: 1px solid var(--bs-form-check-border); /* Border color for unchecked state */ } html[data-bs-theme="light"] .form-check-input:checked { background-color: var(--bs-form-check-checked-bg); /* Darker pink background when checked */ border-color: var(--bs-form-check-checked-border-color); /* Border color when checked */ } html[data-bs-theme="light"] .form-check-input:focus, html[data-bs-theme="light"] .form-check-input:active { box-shadow: 0 0 0 0.25rem var(--bs-form-check-focus-shadow); /* Pink shadow on focus */ border-color: var(--bs-form-check-focus-border-color); /* Focused border color */ } html[data-bs-theme="light"] .form-switch .form-check-input:checked { background-color: var(--bs-form-check-checked-bg); /* Darker pink for checked switch */ border-color: var(--bs-form-check-checked-border-color); /* Border color when checked */ } html[data-bs-theme="light"] .form-switch .form-check-input:checked::before { background-color: var(--bs-form-check-switch-handle-color); /* White handle on checked switch */ } /* Input for team box */ html[data-bs-theme="light"] .input-group-text { border: var(--bs-border-width) solid var(--bs-form-control-border-color); } /* Form Control Customization */ html[data-bs-theme="light"] .form-control { background-color: var(--bs-form-control-bg); /* Background for inputs */ color: var(--bs-form-control-color); /* Text color */ border: 1px solid var(--bs-form-control-border-color); /* Border color */ padding: 0.5rem 1rem; border-radius: 0.25rem; } html[data-bs-theme="light"] .form-control::placeholder { color: var(--bs-form-control-placeholder-color); /* Placeholder color */ opacity: 0.7; } html[data-bs-theme="light"] .form-control:focus { border-color: var(--bs-form-control-focus-border-color); /* Focus border color */ box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow); /* Focus shadow */ } html[data-bs-theme="light"] .form-control:disabled, html[data-bs-theme="light"] .form-control[readonly] { background-color: var(--bs-form-control-disabled-bg); /* Background for disabled/readonly */ color: var(--bs-form-control-disabled-color); /* Text color for disabled/readonly */ border-color: var(--bs-form-control-disabled-border-color); /* Border color for disabled/readonly */ opacity: 1; } html[data-bs-theme="light"] .form-select { background-color: var(--bs-form-control-bg); /* Background for select inputs */ color: var(--bs-form-control-color); /* Text color for select */ border: 1px solid var(--bs-form-control-border-color); /* Border color for select */ } html[data-bs-theme="light"] .form-select:focus { border-color: var(--bs-form-control-focus-border-color); /* Focus border color for select */ box-shadow: 0 0 0 0.25rem var(--bs-form-control-focus-shadow); /* Focus shadow for select */ } /* Light Theme Customizations for File Input Button */ html[data-bs-theme="light"] .form-control::-webkit-file-upload-button { background-color: var(--bs-tertiary-bg); /* Set pink tertiary background color */ color: var(--bs-body-color); /* Text color */ } html[data-bs-theme="light"] .form-control::file-selector-button { background-color: var(--bs-tertiary-bg); /* Set pink tertiary background color */ color: var(--bs-body-color); /* Text color */ } html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { background-color: var(--bs-secondary-bg); /* Set pink secondary background color for hover */ } html[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--bs-secondary-bg); /* Set pink secondary background color for hover */ } /* Table Styling */ html[data-bs-theme="light"] .table { background-color: var(--bs-table-bg); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } /* Ensure consistent text color for all rows using variables */ html[data-bs-theme="light"] .table-striped tbody tr { --bs-table-striped-color: var(--bs-table-color); /* Match striped rows to main text color */ } html[data-bs-theme="light"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--bs-table-accent-bg); /* Striped row color */ } html[data-bs-theme="light"] .table-hover tbody tr:hover { background-color: var(--bs-table-hover-bg); /* Hover background color */ color: var(--bs-table-hover-color); } /* Consistent header background and text color using variables */ html[data-bs-theme="light"] .table thead th { background-color: var(--bs-body-bg); /* Use light background */ color: var(--bs-table-color); /* Match header text to table text */ border-color: var(--bs-table-border-color); /* Consistent border color */ } /* Nav Tabs Styling for Pink Theme in Light Theme */ html[data-bs-theme="light"] .nav-tabs { --bs-nav-tabs-border-width: var(--bs-border-width); --bs-nav-tabs-border-color: #ff69b4; /* Pink border color */ --bs-nav-tabs-link-hover-border-color: #ff1493 #ff1493 #ff69b4; /* Pink hover color */ --bs-nav-tabs-link-active-color: #ff69b4; /* Pink active link color */ --bs-nav-tabs-link-active-bg: var(--bs-body-bg); /* Background remains the same */ --bs-nav-tabs-link-active-border-color: #ff1493 #ff1493 var(--bs-body-bg); /* Pink active border color */ border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); } html[data-bs-theme="light"] .nav-tabs .nav-link { margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); border: var(--bs-nav-tabs-border-width) solid transparent; border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); color: var(--bs-nav-link-color); padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); background-color: transparent; /* Transparent background for inactive tabs */ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } /* Hover effect for nav links */ html[data-bs-theme="light"] .nav-tabs .nav-link:hover { color: var(--bs-nav-link-hover-color); border-color: var(--bs-nav-tabs-link-hover-border-color); /* Uses hover border color from defined variables */ } /* Active Tab Styling */ html[data-bs-theme="light"] .nav-tabs .nav-item.show .nav-link, html[data-bs-theme="light"] .nav-tabs .nav-link.active { color: var(--bs-nav-tabs-link-active-color); /* Dark pink for active tab text */ background-color: var(--bs-nav-tabs-link-active-bg); /* Transparent background for active tab */ border-color: var(--bs-nav-tabs-link-active-border-color); /* Pink border on top and sides, no bottom border */ } /* Primary Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-primary { color: var(--bs-btn-primary-color); background-color: var(--bs-btn-primary-bg); border-color: var(--bs-btn-primary-border-color); } html[data-bs-theme="light"] .btn-group .btn-primary:hover, html[data-bs-theme="light"] .btn-group .btn-primary:focus { color: var(--bs-btn-primary-hover-color); background-color: var(--bs-btn-primary-hover-bg); border-color: var(--bs-btn-primary-hover-border-color); } /* Secondary Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-secondary { color: var(--bs-btn-secondary-color); background-color: var(--bs-btn-secondary-bg); border-color: var(--bs-btn-secondary-border-color); } html[data-bs-theme="light"] .btn-group .btn-secondary:hover, html[data-bs-theme="light"] .btn-group .btn-secondary:focus { color: var(--bs-btn-secondary-hover-color); background-color: var(--bs-btn-secondary-hover-bg); border-color: var(--bs-btn-secondary-hover-border-color); } /* Success Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-success { color: var(--bs-btn-success-color); background-color: var(--bs-btn-success-bg); border-color: var(--bs-btn-success-border-color); } html[data-bs-theme="light"] .btn-group .btn-success:hover, html[data-bs-theme="light"] .btn-group .btn-success:focus { color: var(--bs-btn-success-hover-color); background-color: var(--bs-btn-success-hover-bg); border-color: var(--bs-btn-success-hover-border-color); } /* Danger Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-danger { color: var(--bs-btn-danger-color); background-color: var(--bs-btn-danger-bg); border-color: var(--bs-btn-danger-border-color); } html[data-bs-theme="light"] .btn-group .btn-danger:hover, html[data-bs-theme="light"] .btn-group .btn-danger:focus { color: var(--bs-btn-danger-hover-color); background-color: var(--bs-btn-danger-hover-bg); border-color: var(--bs-btn-danger-hover-border-color); } /* Light Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-light { color: var(--bs-btn-light-color); background-color: var(--bs-btn-light-bg); border-color: var(--bs-btn-light-border-color); } html[data-bs-theme="light"] .btn-group .btn-light:hover, html[data-bs-theme="light"] .btn-group .btn-light:focus { color: var(--bs-btn-light-hover-color); background-color: var(--bs-btn-light-hover-bg); border-color: var(--bs-btn-light-hover-border-color); } /* Dark Button in Button Group */ html[data-bs-theme="light"] .btn-group .btn-dark { color: var(--bs-btn-dark-color); background-color: var(--bs-btn-dark-bg); border-color: var(--bs-btn-dark-border-color); } html[data-bs-theme="light"] .btn-group .btn-dark:hover, html[data-bs-theme="light"] .btn-group .btn-dark:focus { color: var(--bs-btn-dark-hover-color); background-color: var(--bs-btn-dark-hover-bg); border-color: var(--bs-btn-dark-hover-border-color); } html[data-bs-theme="light"] .btn-outline-primary:hover, html[data-bs-theme="light"] .btn-outline-primary:focus { color: var(--bs-btn-outline-primary-hover-color); /* White text on hover */ background-color: var(--bs-btn-outline-primary-hover-bg); border-color: var(--bs-btn-outline-primary-hover-border-color); box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-outline-primary-focus-shadow-rgb), 0.5); } /* Active and Checked Button States in Light Theme */ html[data-bs-theme="light"] .btn-check:checked + .btn, html[data-bs-theme="light"] .btn.active, html[data-bs-theme="light"] .btn.show, html[data-bs-theme="light"] .btn:first-child:active, html[data-bs-theme="light"] :not(.btn-check) + .btn:active { color: var(--bs-btn-active-color); /* Text color when active */ background-color: var(--bs-btn-active-bg); /* Background color when active */ border-color: var(--bs-btn-active-border-color); /* Border color when active */ background-image: none; /* Remove gradient if enabled */ box-shadow: var(--bs-btn-active-shadow); /* Active shadow effect */ transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } /* Focus-visible state for Active and Checked Buttons */ html[data-bs-theme="light"] .btn-check:checked:focus-visible + .btn, html[data-bs-theme="light"] .btn:focus-visible { color: var(--bs-btn-hover-color); /* Text color on focus */ background-color: var(--bs-btn-hover-bg); /* Background color on focus */ border-color: var(--bs-btn-hover-border-color); /* Border color on focus */ box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5); /* Pink focus shadow */ } /* Override variables for .btn-outline-primary */ html[data-bs-theme="light"] .btn-outline-primary { --bs-btn-color: var(--bs-btn-outline-primary-color); --bs-btn-border-color: var(--bs-btn-outline-primary-border-color); --bs-btn-hover-color: var(--bs-btn-outline-primary-hover-color); --bs-btn-hover-bg: var(--bs-btn-outline-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-outline-primary-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-outline-primary-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-outline-primary-active-color); --bs-btn-active-bg: var(--bs-btn-outline-primary-active-bg); --bs-btn-active-border-color: var(--bs-btn-outline-primary-active-border-color); --bs-btn-active-shadow: var(--bs-btn-outline-primary-active-shadow); } /* Override variables for .btn-primary */ html[data-bs-theme="light"] .btn-primary { --bs-btn-color: var(--bs-btn-primary-color); --bs-btn-bg: var(--bs-btn-primary-bg); --bs-btn-border-color: var(--bs-btn-primary-border-color); --bs-btn-hover-color: var(--bs-btn-primary-hover-color); --bs-btn-hover-bg: var(--bs-btn-primary-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-primary-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-primary-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-primary-active-color); --bs-btn-active-bg: var(--bs-btn-primary-active-bg); --bs-btn-active-border-color: var(--bs-btn-primary-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-secondary */ html[data-bs-theme="light"] .btn-secondary { --bs-btn-color: var(--bs-btn-secondary-color); --bs-btn-bg: var(--bs-btn-secondary-bg); --bs-btn-border-color: var(--bs-btn-secondary-border-color); --bs-btn-hover-color: var(--bs-btn-secondary-hover-color); --bs-btn-hover-bg: var(--bs-btn-secondary-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-secondary-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-secondary-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-secondary-active-color); --bs-btn-active-bg: var(--bs-btn-secondary-active-bg); --bs-btn-active-border-color: var(--bs-btn-secondary-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-success */ html[data-bs-theme="light"] .btn-success { --bs-btn-color: var(--bs-btn-success-color); --bs-btn-bg: var(--bs-btn-success-bg); --bs-btn-border-color: var(--bs-btn-success-border-color); --bs-btn-hover-color: var(--bs-btn-success-hover-color); --bs-btn-hover-bg: var(--bs-btn-success-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-success-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-success-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-success-active-color); --bs-btn-active-bg: var(--bs-btn-success-active-bg); --bs-btn-active-border-color: var(--bs-btn-success-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-danger */ html[data-bs-theme="light"] .btn-danger { --bs-btn-color: var(--bs-btn-danger-color); --bs-btn-bg: var(--bs-btn-danger-bg); --bs-btn-border-color: var(--bs-btn-danger-border-color); --bs-btn-hover-color: var(--bs-btn-danger-hover-color); --bs-btn-hover-bg: var(--bs-btn-danger-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-danger-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-danger-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-danger-active-color); --bs-btn-active-bg: var(--bs-btn-danger-active-bg); --bs-btn-active-border-color: var(--bs-btn-danger-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-warning */ html[data-bs-theme="light"] .btn-warning { --bs-btn-color: var(--bs-btn-warning-color); --bs-btn-bg: var(--bs-btn-warning-bg); --bs-btn-border-color: var(--bs-btn-warning-border-color); --bs-btn-hover-color: var(--bs-btn-warning-hover-color); --bs-btn-hover-bg: var(--bs-btn-warning-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-warning-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-warning-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-warning-active-color); --bs-btn-active-bg: var(--bs-btn-warning-active-bg); --bs-btn-active-border-color: var(--bs-btn-warning-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-info */ html[data-bs-theme="light"] .btn-info { --bs-btn-color: var(--bs-btn-info-color); --bs-btn-bg: var(--bs-btn-info-bg); --bs-btn-border-color: var(--bs-btn-info-border-color); --bs-btn-hover-color: var(--bs-btn-info-hover-color); --bs-btn-hover-bg: var(--bs-btn-info-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-info-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-info-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-info-active-color); --bs-btn-active-bg: var(--bs-btn-info-active-bg); --bs-btn-active-border-color: var(--bs-btn-info-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-light */ html[data-bs-theme="light"] .btn-light { --bs-btn-color: var(--bs-btn-light-color); --bs-btn-bg: var(--bs-btn-light-bg); --bs-btn-border-color: var(--bs-btn-light-border-color); --bs-btn-hover-color: var(--bs-btn-light-hover-color); --bs-btn-hover-bg: var(--bs-btn-light-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-light-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-light-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-light-active-color); --bs-btn-active-bg: var(--bs-btn-light-active-bg); --bs-btn-active-border-color: var(--bs-btn-light-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Override variables for .btn-dark */ html[data-bs-theme="light"] .btn-dark { --bs-btn-color: var(--bs-btn-dark-color); --bs-btn-bg: var(--bs-btn-dark-bg); --bs-btn-border-color: var(--bs-btn-dark-border-color); --bs-btn-hover-color: var(--bs-btn-dark-hover-color); --bs-btn-hover-bg: var(--bs-btn-dark-hover-bg); --bs-btn-hover-border-color: var(--bs-btn-dark-hover-border-color); --bs-btn-focus-shadow-rgb: var(--bs-btn-dark-focus-shadow-rgb); --bs-btn-active-color: var(--bs-btn-dark-active-color); --bs-btn-active-bg: var(--bs-btn-dark-active-bg); --bs-btn-active-border-color: var(--bs-btn-dark-active-border-color); --bs-btn-active-shadow: var(--bs-btn-active-shadow); } /* Define color and border variables for each outline button type */ html[data-bs-theme="light"] .btn-outline-primary { --bs-btn-color: var(--bs-btn-outline-primary-color); --bs-btn-border-color: var(--bs-btn-outline-primary-color); } html[data-bs-theme="light"] .btn-outline-secondary { --bs-btn-color: var(--bs-btn-outline-secondary-color); --bs-btn-border-color: var(--bs-btn-outline-secondary-color); } html[data-bs-theme="light"] .btn-outline-success { --bs-btn-color: var(--bs-btn-outline-success-color); --bs-btn-border-color: var(--bs-btn-outline-success-color); } html[data-bs-theme="light"] .btn-outline-danger { --bs-btn-color: var(--bs-btn-outline-danger-color); --bs-btn-border-color: var(--bs-btn-outline-danger-color); } html[data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: var(--bs-btn-outline-warning-color); --bs-btn-border-color: var(--bs-btn-outline-warning-color); } html[data-bs-theme="light"] .btn-outline-info { --bs-btn-color: var(--bs-btn-outline-info-color); --bs-btn-border-color: var(--bs-btn-outline-info-color); } html[data-bs-theme="light"] .btn-outline-light { --bs-btn-color: var(--bs-btn-outline-light-color); --bs-btn-border-color: var(--bs-btn-outline-light-color); } html[data-bs-theme="light"] .btn-outline-dark { --bs-btn-color: var(--bs-btn-outline-dark-color); --bs-btn-border-color: var(--bs-btn-outline-dark-color); } /* Single hover rule for outline buttons */ html[data-bs-theme="light"] .btn-outline-primary:hover, html[data-bs-theme="light"] .btn-outline-secondary:hover, html[data-bs-theme="light"] .btn-outline-success:hover, html[data-bs-theme="light"] .btn-outline-danger:hover, html[data-bs-theme="light"] .btn-outline-warning:hover, html[data-bs-theme="light"] .btn-outline-info:hover, html[data-bs-theme="light"] .btn-outline-light:hover, html[data-bs-theme="light"] .btn-outline-dark:hover { color: var(--bs-btn-color); background-color: transparent; border-color: var(--bs-btn-border-color); box-shadow: none; } html[data-bs-theme="light"] .table { --bs-table-color: var(--bs-body-color); /* Text color for table */ --bs-table-border-color: var(--bs-secondary); /* Light pink border color for table */ } /* Light Mode Modal Styling */ html[data-bs-theme="light"] .modal { --bs-modal-color: var(--bs-body-color); /* Text color */ --bs-modal-bg: var(--bs-body-bg); /* Background color */ --bs-modal-border-color: #ff99cc; /* Light pink border color */ --bs-modal-header-border-color: var(--bs-modal-border-color); /* Header border color, referencing modal border color */ --bs-modal-header-border-width: var(--bs-border-width); /* Custom header border width */ --bs-modal-footer-bg: var(--bs-body-bg); /* Footer background */ --bs-modal-footer-border-color: #ff99cc; /* Footer border color */ --bs-modal-footer-border-width: var(--bs-border-width); /* Footer border width */ color: var(--bs-modal-color); /* Apply text color */ border-color: var(--bs-modal-border-color); /* Apply border color */ box-shadow: var(--bs-modal-box-shadow); /* Apply shadow effect */ } /* Modal Header Styling for Light Mode */ html[data-bs-theme="light"] .modal .modal-header { color: var(--bs-modal-color); /* Header text color */ border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); /* Apply header border color */ } /* Modal Footer Styling for Light Mode */ html[data-bs-theme="light"] .modal-footer { border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); /* Footer border */ } /* Custom Modal Backdrop Styling */ html[data-bs-theme="light"] .modal-backdrop.show { background-color: rgba(0, 0, 0, 0.5); /* Darker semi-transparent backdrop */ } /* Border Top Styling */ html[data-bs-theme="light"] .border-top { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary) !important; } /* Custom cards for profile selection and kasperikoski.fi index */ html[data-bs-theme="light"] .custom-card.card { background-color: #f8f9fa; /* Vaalea tausta */ transition: all 0.3s ease; border-radius: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } html[data-bs-theme="light"] .custom-card.card:hover { background-color: #e9ecef; /* Hieman tummempi hover-tausta */ transform: scale(1.02); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } /* ██████ █████ ██████ ██ ██ ████████ ██ ██ ███████ ███ ███ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ████ ██ ██ ██ ███████ ██████ █████ ██ ███████ █████ ██ ████ ██ █████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███████ ██ ██ ███████ */ html[data-bs-theme="dark"] .custom-card.card { background-color: #2a2d31; /* Tumma neutraali */ transition: all 0.3s ease; border-radius: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } html[data-bs-theme="dark"] .custom-card.card:hover { background-color: #343a40; /* Kirkkaampi hover-tausta */ transform: scale(1.02); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } /* ____ ____ _________ ____ ____ _____ */ /* |_ || _| | _ _ | |_ \ / _| |_ _| */ /* | |__| | |_/ | | \_| | \/ | | | */ /* | __ | | | | |\ /| | | | _ */ /* _| | | |_ _| |_ _| |_\/_| |_ _| |__/ | */ /* |____||____| |_____| |_____||_____| |________| */ /* */ /* ___ ___ _ */ /* .' _ '. .' ..] / |_ */ /* | (_) '___ _| |_ .--. .--. `| |-' .---. _ .--. */ /* .`___'/ _/ '-| |-' / .'`\ \ / .'`\ \ | | / /__\\ [ `/'`\] */ /* | (___) \_ | | | \__. | | \__. | | |, | \__., | | */ /* `._____.\__| [___] '.__.' '.__.' \__/ '.__.' [___] */ html, body { height: 100%; display: flex; flex-direction: column; } .content-wrap { flex: 1 0 auto; } .footer { flex-shrink: 0; } .icon-link .pencil-icon { transition: transform 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for transform, color, and opacity */ color: lightgrey; /* Default color for pencil icon */ opacity: 0.2; /* Start with a lower opacity */ } .icon-link:hover .pencil-icon { transform: translateY(-0.25rem); /* Moves icon slightly up */ color: #62c370; /* Pleasant pastel green on hover */ opacity: 1.0; /* Full opacity on hover */ } /* Buttons used in the index.php to accept and reject users*/ .user-activation-buttons { border: none; background: none; color: inherit; font-size: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; height: 100%; transition: transform 0.3s ease-in-out, height 0.3s ease-in-out; } .user-activation-buttons:hover { transform: translateY(-10%); } .custom-input, .custom-span { border-radius: 0; /* Removes rounded corners */ } .custom-span { width: 196px; /* Fixed width of 60px */ display: inline-block; /* Changes display to inline-block */ text-align: center; /* Centers text horizontally */ border-radius: 0; /* Removes rounded corners */ } /* ___ ___ __ __ ___ _ ___ ___ ___ _ _ ___ / __/ _ \| \/ | _ \/_\ | _ \ __| | _ \ || | _ \ | (_| (_) | |\/| | _/ _ \| / _| _ | _/ __ | _/ \___\___/|_| |_|_|/_/ \_\_|_\___| (_) |_| |_||_|_| */ .blinking-today strong { font-weight: bold; color: yellow; } /* Custom style for inline code blocks */ .inline-code { font-family: Consolas, "Courier New", monospace; background-color: var(--bs-body-bg); /* Use body background color as base */ color: var(--bs-body-color); /* Ensure text color is appropriate */ padding: 0px 4px; border-radius: 4px; display: inline-block; } /* Adjust the background and border for dark mode */ [data-bs-theme="dark"] .inline-code { background-color: var(--bs-gray-700); } /* Adjust the background and border for light mode */ [data-bs-theme="light"] .inline-code { background-color: var(--bs-gray-200); } @keyframes betBlink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } } /* Sama kova on/off-välkky kaikille countdown-elementeille */ .countdown, .countdown-xs { animation: betBlink 1s steps(1, end) infinite; } /* Estä animaatio jos käyttäjä haluaa reduced motion */ @media (prefers-reduced-motion: reduce) { .countdown, .countdown-xs { animation: none; } } /* Big checkbox scale(3) */ .form-check-input[type=checkbox].big-checkbox { transform: scale(3); /* Scaled up significantly */ margin: 1.5rem; /* Provides decent spacing */ border-radius: 0; /* Overrides the default border-radius */ } /* ___ _ _ _ ___ _ _ ___ _____ ___ _ ___ ___ ___ ___ _ ___ ___ _ _ _____ ___ / _ \| \| | | |_ _| \| | __| |_ _| _ \ /_\ | __| __|_ _/ __| | | |_ _/ __| || |_ _/ __| | (_) | .` | |__ | || .` | _| | | | / / _ \| _|| _| | | (__ | |__ | | (_ | __ | | | \__ \ \___/|_|\_|____|___|_|\_|___| |_| |_|_\/_/ \_\_| |_| |___\___| |____|___\___|_||_| |_| |___/ */ /* ========================================================= TRAFFIC LIGHT PRESENCE INDICATORS (Bootstrap Icons) Designed for Bootstrap 5 environments with optional dark mode support. This stylesheet implements three presence states: • offline – dim grey indicator • online – bright green indicator with animated glow • recent – blinking yellow indicator The glow is rendered using a circular pseudo-element instead of CSS filters. Reason: - Safari (iOS/iPadOS) produces square artifacts when animating drop-shadow filters. - Chrome renders box-shadow on the element bounding box. Using a circular pseudo-element ensures the glow always stays round and works reliably across browsers. JavaScript can optionally modify the glow strength using the CSS variable: --glowK which acts as a multiplier for glow intensity. ========================================================= */ /* --------------------------------------------------------- Base icon styling --------------------------------------------------------- */ .traffic-light.bi-circle-fill { vertical-align: middle; /* Required for pseudo-element glow positioning */ position: relative; display: inline-block; /* Smooth transitions */ transition: opacity 0.2s ease, color 0.2s ease; /* Glow strength multiplier (JS can modify this) */ --glowK: 1; /* Glow visibility (used by blinking state) */ --glowA: 0; } /* --------------------------------------------------------- Circular glow halo (browser-safe) --------------------------------------------------------- The glow is drawn behind the icon using a pseudo-element. Advantages: • always circular • avoids Safari drop-shadow artifacts • avoids Chrome box-shadow square edges • supports animation via CSS variables */ .traffic-light.bi-circle-fill::after { content: ""; position: absolute; /* place glow exactly at icon center */ left: 50%; top: 50%; width: 1em; height: 1em; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: var(--glowA); box-shadow: 0 0 calc(0.35em * var(--glowK)) currentColor, 0 0 calc(0.65em * var(--glowK)) currentColor; } /* --------------------------------------------------------- OFFLINE — dim "powered off" appearance --------------------------------------------------------- */ .traffic-light-offline.bi-circle-fill { color: #3a3a3a; opacity: 0.35; /* no glow */ --glowA: 0; animation: none; } /* --------------------------------------------------------- ONLINE — bright green with steady glow --------------------------------------------------------- */ .traffic-light-online.bi-circle-fill { color: #39ff14; opacity: 1; /* enable glow */ --glowA: 1; animation: none; } /* --------------------------------------------------------- RECENTLY ONLINE — blinking yellow indicator --------------------------------------------------------- The blinking effect controls: • icon opacity • glow visibility Glow strength still comes from the pseudo-element. */ @-webkit-keyframes traffic-blink-yellow { 0%, 70% { opacity: 1; --glowA: 1; } 70%, 100% { opacity: 0.45; --glowA: 0; } } @keyframes traffic-blink-yellow { 0%, 70% { opacity: 1; --glowA: 1; } 70%, 100% { opacity: 0.45; --glowA: 0; } } .traffic-light-recent.bi-circle-fill { color: #ffc107; -webkit-animation: traffic-blink-yellow 1s steps(1, end) infinite; animation: traffic-blink-yellow 1s steps(1, end) infinite; } /* ========================================================= DARK MODE ENHANCEMENTS Applied only when Bootstrap dark mode is active ========================================================= */ /* --------------------------------------------------------- Darker offline indicators on striped tables --------------------------------------------------------- */ html[data-bs-theme="dark"] .table.table-striped > tbody > tr:nth-of-type(odd) .traffic-light-offline.bi-circle-fill { color: #1a1a1a; opacity: 0.25; } /* --------------------------------------------------------- Optional: slightly reduce glow brightness in dark mode --------------------------------------------------------- Adjusting the color alone is usually enough because the glow uses currentColor. */ html[data-bs-theme="dark"] .traffic-light-online.bi-circle-fill { color: #39ff14; }