/*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; font-size: 110%; padding: 15px 27px 15px 27px; } .header .backbutton:hover a { color: blue; } /*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: 25px; position: absolute; left: 38rem; 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; } .selectors { width: 33rem; min-width: 30rem; } /* Plan header styling*/ h3.planhead { width: 25rem; margin: 0; font-size: 175%; text-align: center; } .plangroupselectors { display: flex; flex-direction: row; } /* Form styling */ .select { width: fit-content; margin-top: 15px; margin-left: 25%; margin-right: 50px; } .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; height: 15rem; margin-left: 25%; display: flex; flex-wrap: wrap; flex-direction: column; text-align: center; } /* 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: 50%; } /* 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: 50%; } /* 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; }