/*TO DO: adjust formatting of webpage */ /* Set the font size to 100%, ensures rem scaling is correct */ :root { font-size: 100%; } /*body style*/ body { margin: 0; width: fit-content; height: fit-content; } /* entire page style, scroll on overflow */ html { margin: 0; width: fit-content; height: fit-content; overflow-x: scroll; overflow-y: scroll; } /*Header style*/ header { padding: 8px 8px; background-color: #275d38; margin-bottom: 10px; height: 60px; min-width: 100vw; } .backbutton { background-color: white; text-align: center; border-radius: 4px; } .header .backbutton a { color: black; /* Text color is already black */ font-size: 110%; padding: 15px 15px 15px 15px; white-space: nowrap; /* Prevent text from wrapping to a new line */ font-family: sans-serif; /* Use a generic font family to match the button style */ } .header .backbutton:hover a { color: #275d38; /* Changed hover color to header green */ } /*Header link style */ .header a { padding: 15px; text-decoration: none; line-height: 1.5rem; border-radius: 4px; color: #f2cd00; font-size: 100%; font-family: inherit; text-align: center; } /*Title style*/ .header a.site-title { width: fit-content; font-size: 40px; position: absolute; left: 25rem; top: 12px; color: #F2CD00; } /*Image style*/ .header img { width: 183px; height: 50px; margin-right: 0; float: left; } /* at 500px align header left when the screen is 500px wide or less*/ @media screen and (max-width: 840px) { .header a { float: none; display: block; text-align: center; } .header img{ margin-right: 0; float: left; /* img needs to be re-aligned on narrow screens */ position: relative; bottom: 10px; } .header a.site-title { font-size: 15px; } /* Changing width of tooltip on narrow screens */ .coursecontainer .tooltip .tooltiptextleft, .coursecontainer .tooltip .tooltiptextright, .orcoursecontainer .tooltip .tooltiptextleft, .orcoursecontainer .tooltip .tooltiptextright, .coursegroupcontainer .tooltip .tooltiptextleft, .coursegroupcontainer .tooltip .tooltiptextright { width: 400px; } /* Smaller font on narrow screens */ .coursecontainer .tooltip .descriptiontitle, .orcoursecontainer .tooltip .descriptiontitle, .coursegroupcontainer .tooltip .descriptiontitle { font-size: 15px; } /* Smaller font on narrow screens */ .coursecontainer .descriptionalphahours, .coursecontainer .descriptionavailability, .coursecontainer .descriptioncredits, .coursecontainer .descriptionfeeindex, .coursecontainer .fulldescription, .coursecontainer .accreditationheader, .coursecontainer .accreditationunits, .orcoursecontainer .descriptionalphahours, .orcoursecontainer .descriptionavailability, .orcoursecontainer .descriptioncredits, .orcoursecontainer .descriptionfeeindex, .orcoursecontainer .fulldescription, .orcoursecontainer .accreditationheader, .orcoursecontainer .accreditationunits .coursegroupcontainer .descriptionalphahours, .coursegroupcontainer .descriptionavailability, .coursegroupcontainer .descriptioncredits, .coursegroupcontainer .descriptionfeeindex, .coursegroupcontainer .fulldescription, .coursegroupcontainer .accreditationheader, .coursegroupcontainer .accreditationunits { font-size: 12px; } } .toprowcontainer { display: flex; flex-direction: row; } .linelegendcontainer { width: 33rem; min-width: 30rem; } /* description over line legend (prereq/coreq lines) */ .linelegenddescription { width: 25rem; margin-left: 20px; margin-top: 20px; } /* line legend image */ .linelegend { width: 275px; height: 150px; margin-left: 20px; } /* Spacing for the GRADUATE ATTRIBUTE Element */ .ga-container { width: 15rem; min-width: 12rem; margin: 0 1rem; } /* Spacing for the PLAN Element */ .selectors { width: 30rem; min-width: 26rem; margin: 0 0.5rem; } /* Spacing for the CATAGORIES Element */ .legend { /* width: 33rem; */ /* Removed fixed width to allow dynamic sizing */ min-width: 15rem; /* Set a reasonable minimum width */ margin: 0 1rem; } /* Add a 3D "inland" effect to all three top-row containers */ .ga-container, .selectors, .legend { background-color: #f7f7f7; /* A light grey background */ border: 1px solid #d1d1d1; /* A subtle border */ border-radius: 8px; /* Rounded corners */ padding: 1rem; /* Add some internal spacing */ box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* The 3D shadow effect */ } /* Plan header styling*/ h3.planhead, h3.legendhead, h3.gahead { width: 25rem; margin: 0; font-size: 175%; text-align: left; } .plangroupselectors { display: flex; flex-direction: row; } /* Form styling */ .select { width: fit-content; margin-top: 15px; margin-left: 0; /* Removed percentage-based margin */ margin-right: 20px; } .coursegroupselector { width: fit-content; margin-top: 15px; } /* Form text styling */ label { display: inline-block; font-size: 115%; padding-top: 10px; } .legend { margin: 0; } /* Form styling, radio buttons to switch plan */ .legenddescription { margin-left: 22%; width: fit-content; display: inline-block; text-align: center; } /* legend for categories wrapper */ .legendboxes { /* width: 20rem; */ /* Removed fixed width */ height: 15rem; margin-left: 0; /* Removed percentage-based margin */ display: flex; flex-wrap: wrap; flex-direction: column; /* text-align: center; */ /* No longer needed with flex */ } /* Individual legend button, unpressed */ .legendbutton { text-align: center; padding: 8px; box-shadow: 0px 5px 2px #757575, inset 0px 2px 0px rgba(255, 255, 255, 0.5); border-radius: 2px; margin: 5px; width: 12rem; /* Set a fixed width for each button */ } /* Individual legend button, pressed */ .legendbutton-pressed { text-align: center; padding: 6px; border: 2px solid white; border-radius: 2px; position: relative; top: 5px; margin: 5px; width: 12rem; /* Set a fixed width for each button */ } /* Wrapper div for the term names and course boxes, the main content */ #main { height: fit-content; } #explainertext { margin-left: 10px; } /* Plan diagram styling */ .display { width:fit-content; height: fit-content; position: relative; right: 15px; } /* Term column styling */ .term { margin-left: 4rem; display: flex; flex-direction: column; align-items: center; } /* Term header styling */ .termheader { margin-bottom: 30px; width: 125%; text-align: center; font-size: 115%; } /* Contains one (or two if an "or" option) course */ .coursecontainer, .coursegroupcontainer { display: flex; flex-direction: column; margin-bottom: 50px; } .orcoursecontainer { display: flex; flex-direction: column; margin-bottom: 35px; outline-color: #542a7e; outline-width: 3px; outline-style: dashed; outline-offset: 3px; } .coursegroupcontainer { outline-width: 3.5px; outline-style: ridge; outline-offset: 5px; position: relative; bottom: 16px; padding: 1px; } .coursegroupcontainer .course { margin-bottom: 49px; } .coursegrouptitle { text-align: center; margin: 0; position: relative; bottom: 28px; background-color: #84e3f6; } /* Text within a course box styling*/ .embed { text-align: center; position: relative; bottom: 4px; } /* Course box styling */ .course, .orcourse { border-style: solid; border-color: black; border-width: 2px; height: 50px; width: 150px; } .coursegroupcontainer .lastcourseingroup { margin-bottom: 0; } /* two option with "or" between them, smaller margin */ .orcourse { margin-top: 10px; margin-bottom: 10px; } /* format of the word "OR" container */ .ortext { margin: 0; padding: 0; text-align: center; position: relative; left: 40%; } /* format of the word "OR" */ p.ortext { width: 25px; border-style: solid; border-color: black; border-width: 2px; border-radius: 10px; } /* Complementray elective box, taller to fit text */ .COMP, .COMP-highlighted { height: 80px; } /* Program elective box, taller to fit text */ .PROG, .PROG-highlighted { height: 80px; } /* Fits better if text is scaled */ .PROG .embed, .PROG-highlighted .embed { font-size: 110%; } /* Default course hover */ .course:hover, .orcourse:hover { background-color: #f2cd00; border-color:#f2cd00; } /* Default course selected */ .course-highlighted { border-style: solid; border-color: black; border-width: 2px; height: 50px; width: 150px; background-color: #f2cd00; } /* Makes sure margin of orcourse is unchanged */ .orcourse-highlighted { border-style: solid; border-color: black; border-width: 2px; height: 50px; width: 150px; margin-bottom: 8px; background-color: #f2cd00; } /* Default highlighted hover */ .course-highlighted:hover, .orcourse-highlighted:hover { background-color: #f2cd00; border-color:#f2cd00; } /*This is for the Hover over course description*/ .tooltip { position: relative; display: inline-block; } /* Most properties taken from Calendar */ /* Course on left of page, tooltip appears to the right of course */ .tooltip .tooltiptextright, .tooltip .tooltiptextleft, .tooltiptextright-locked, .tooltiptextleft-locked { visibility: hidden; width: 46vw; max-width: 900px; padding: 0px 10px; background-color: #EEEEEE; border: 1px solid #444444; color: #2B292A; text-align: left; border-radius: 0px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 125%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; font-size: 100%; font-weight: inherit; font-style: inherit; font-family: 'Roboto', sans-serif; vertical-align: baseline; white-space: normal; } .tooltip .tooltiptextright { left: 50%; } .tooltip .tooltiptextleft { right: 50%; } .tooltiptextright-locked { visibility: visible; opacity: 1; left: 50%; } .tooltiptextleft-locked { visibility: visible; opacity: 1; right: 50%; } /* After hovering, set content to empty */ .tooltip .tooltiptextright::after, .tooltip .tooltiptextright-locked::after { content: ""; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #EEEEEE transparent transparent transparent; } /* After hovering, set content to empty */ .tooltip .tooltiptextleft::after, .tooltip .tooltiptextleft-locked::after { content: ""; top: 100%; right: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #EEEEEE transparent transparent transparent; } /* On hover, dsiplay course description */ .tooltip:hover .tooltiptextright, .tooltip:hover .tooltiptextleft { visibility: visible; opacity: 1; } /* Title of description, format taken from Calendar */ .descriptiontitle { color: #2b292a; font-size: 30px; font-weight: 500; font-family: 'Roboto', sans-serif; } /* Line between title and body of description */ .descriptionline { height: 0; border: 0; border-top: 1px solid #444444; background: transparent; display: block; unicode-bidi: isolate; margin: 4px; overflow: hidden; border-style: inset; border-width: 1px; } /* Various components of description body */ .descriptioncredits, .descriptionfeeindex, .descriptionavailability, .descriptionalphahours, .fulldescription { display: inline; } /* Separation between description and accreditation info */ .fulldescription { margin: 0px 0px 10px 0px; } .accreditationheader { font-size: 105%; } /* footer formatting */ footer { padding: 8px 8px; background-color: #275d38; margin-top: 10px; margin-bottom: 0; height: 64px; position: relative; bottom: 0; min-width: 100vw; } /* U of A logo */ .footer img { width: 183px; height: 50px; margin-right: 0; position: relative; left: 44rem; } /* copyright logo and text */ #copyright { position: relative; left: 60rem; color: #FFFFFF; font-family: 'Roboto',sans-serif; font-size: 75%; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; } .subdropdown { position: relative; display: inline-block; } .subdropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; } .subsubdropdown { position: relative; display: inline-block; } .subsubdropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .subdropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .subsubdropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown:hover .dropdown-content { display: block; } .subdropdown:hover .subdropdown-content { display: block; } .subsubdropdown:hover .subsubdropdown-content { display: block; } /* Popup Overlay */ .popup-overlay { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1000; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.7); /* Black w/ opacity */ justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ } /* Popup Content */ .popup-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; /* Could be more specific */ max-width: 800px; /* Max width for readability */ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s; position: relative; /* Needed for close button positioning */ border-radius: 8px; max-height: 90vh; /* Max height to allow scrolling */ overflow-y: auto; /* Enable vertical scrolling for content */ } /* The Close Button */ .close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; cursor: pointer; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } /* Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* Help Button in Header */ #helpButton { background-color: white; color: black; /* Changed text to black */ padding: 15px 15px; /* Matched padding to Back to Index button */ border: none; border-radius: 5px; cursor: pointer; font-size: 110%; /* Matched font size */ margin-right: 10px; /* Space from edge */ font-family: inherit; /* Ensure font matches other header elements */ white-space: nowrap; } #helpButton:hover { color: #275d38; /* Changed hover color to header green */ } .help-button-cell { vertical-align: middle; text-align: right; }