/* CSS Stylesheet - Custom Styles for Web Interface ------------------------------------------------- This file contains custom CSS rules for styling a web page with the following features: 1. **Global Styles:** - Set margins to zero for the body to ensure consistent spacing. - Define a global font-family for various text elements such as headings, paragraphs, and links. 2. **Headings & Text:** - Custom font size and color for heading tags (h1, h2). - Provides specific styles for certain link types (e.g., .top, .menu1, .menu2, etc.). 3. **Table Styling:** - Custom styles for table headers and rows, including different backgrounds for checked/unchecked rows. - Special styling for the top table's header and general layout for table cells. 4. **Links & Navigation:** - Custom link styles for visited, hover, and unvisited states. - Specific navigation link styles including hover effects and top navigation elements (e.g., #movetop, #Checktop, etc.). 5. **Alerts & Tooltips:** - Alerts are styled to indicate different message types (warning, info, danger) with color-coded backgrounds and borders. - Tooltips are styled to appear with a small popup on hover for extra information. 6. **Interactive Elements:** - Custom styles for form elements, buttons, and inputs. - Specific hover and active states for buttons and links. 7. **Responsive Design:** - A media query for print styling, which hides elements with the `.hidden-print` class during printing. 8. **Legacy Browser Support:** - Added a filter for shadow effects in older versions of Internet Explorer to ensure visual consistency. Usage: - Link this CSS file in the `` of an HTML document to apply the styling rules to the page. - Customize the colors, fonts, and layout by modifying the variables and selectors in this file. @since 19/3/2025: Added styles for tooltips and improved print-specific CSS rules. */ /* General body styling */ BODY { margin-left: 0; /* No left margin */ margin-top: 0; /* No top margin */ } /* Global font family for various text elements */ body, h1, h2, h3, h4, h5, p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* Reset form margins */ FORM { margin: 0px; } /* Heading Styles */ h1 { font-size: 120%; /* Increase the font size for h1 */ color: #3781e4; /* Set text color to a shade of blue */ background-color: transparent; /* No background */ } h2 { font-size: 100%; /* Default font size for h2 */ color: #b64d04; /* Set text color to orange */ background-color: transparent; /* No background */ } /* Styling for 'top' links (visited and unvisited) */ a.top { color: yellow; /* Set link color to yellow */ } a.top:visited { color: yellow; /* Keep yellow color after the link is visited */ } /* Styling for 'menu1' links */ .menu1, .menu1:visited { color: #2755c4; /* Blue text color */ background-color: #eeeeee; /* Light gray background */ } /* Styling for 'small' links */ .small, .small:visited { color: #2755c4; /* Blue text color */ background-color: transparent; /* Transparent background */ font-size: 85%; /* Smaller font size */ } /* Styling for 'menu2' links */ .menu2, .menu2:visited { color: #222222; /* Dark gray text color */ background-color: #eeeeee; /* Light gray background */ } /* Table styling */ .topTable { background-color: #3781e4; /* Blue background for top-level tables */ } /* Table headers */ th { background-color: #99CCFF; /* Light blue background for table headers */ } /* Styling for checked rows in tables */ tr.checked td { background-color: #fdfae8; /* Light yellow background */ border-left-color: #fdfae8; /* Match border to background color */ border-right-color: #fdfae8; /* Match border to background color */ } /* Styling for unchecked rows in tables */ .unchecked td { background-color: #ededed; /* Light gray background */ border-left-color: #fdfae8; /* Border color matches checked background */ border-right-color: #fdfae8; border-bottom: #efe 1px solid; /* Solid bottom border */ } /* Header styling */ .header { background-color: #eeeeee; /* Light gray background */ border-color: black; /* Black border */ font-weight: bold; /* Bold text */ text-align: center; /* Center align text */ } /* Link styling */ A:LINK, A:VISITED { color: #bd0007; /* Red color for links */ text-decoration: none; /* No underline on links */ } /* Specific class for 'Tmima' links */ .linkTmima:LINK, .linkTmima:VISITED { color: #b64d04; /* Orange color for links */ text-decoration: none; /* No underline */ } /* Hover state for links */ A:HOVER { color: #3781e4; /* Change text color to blue on hover */ } /* Message styling */ .message { color: #bd0007; /* Red text color */ background-color: transparent; /* Transparent background */ font-weight: bold; /* Bold text */ text-align: center; /* Center aligned */ } /* Styling for legend text */ .legend tr td { font-size: 85%; /* Smaller font size */ } /* Styling for input fields inside checked rows */ tr.checked td input { /* Optional: adjust font size here */ } /* Tooltip styling */ #dhtmltooltip { position: absolute; width: 150px; border: 1px solid white; padding: 2px; background-color: lightyellow; visibility: hidden; /* Hidden by default */ z-index: 100; /* Ensure tooltip appears above other elements */ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); /* Apply shadow effect in older browsers */ } /* Top navigation links styling */ a#movetop, a#Checktop, a#addtop, a#deletetop, a#removetop, #DocsTabletop, #enabletop, #disabletop, a#registertop { align-items: flex-start; text-align: center; cursor: default; color: buttontext; background-color: buttonface; box-sizing: border-box; padding: 2px 6px 3px; border-width: 2px; border-style: outset; border-color: buttonface; line-height: 2.4em; } /* Hover state for top navigation links */ a#movetop:hover, a#Checktop:hover, a#addtop:hover, a#deletetop:hover, a#registertop:hover, a#removetop:hover, #DocsTabletop:hover, #enabletop:hover, #disabletop:hover { background: #3cb0fd; /* Blue background on hover */ background-image: linear-gradient(to bottom, #3cb0fd, #3498db); /* Gradient background */ text-decoration: none; /* No underline */ } /* Alert box styles */ .alert { position: relative; padding: .75rem 1.25rem; margin-top: 1rem; line-height: 1.5em; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; } /* Different types of alert messages */ .alert-warning { color: #856404; /* Yellowish text */ background-color: #fff3cd; /* Light yellow background */ border-color: #ffeeba; /* Yellow border */ } .alert-info { color: #0c5460; /* Dark blue text */ background-color: #d1ecf1; /* Light blue background */ border-color: #bee5eb; /* Light blue border */ } .alert-danger { color: #721c24; /* Red text */ background-color: #f8d7da; /* Light red background */ border-color: #f5c6cb; /* Red border */ } /* Tooltip styling - for additional information on hover */ .tooltip { position: relative; display: inline-block; /*border-bottom: 1px dotted #555; */ } .tooltip .tooltiptext { visibility: hidden; /* Hidden by default */ width: 200px; background-color: #777; /* Dark background */ color: #fff; /* White text */ text-align: center; border-radius: 6px; /* Rounded corners */ padding: 10px 5px; position: absolute; z-index: 1; bottom: 150%; /* Position above the tooltip trigger */ left: 50%; margin-left: -60px; /* Center the tooltip */ font-size: 80% } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 20%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; /* Triangle pointing down */ } .tooltip:hover .tooltiptext { visibility: visible; /* Show tooltip on hover */ } /* Print-specific styles */ @media print { .hidden-print { display: none !important; /* Hide elements with class 'hidden-print' when printing */ } }