/** * Basic typography style for copy text */ /* Fonts are loaded via Link in Html */ /* These fonts should load system fonts and not external fonts */ /************************************************************** * Mixin to add media query based on size */ /************************************************************** * Color CSS Variables */ :root { --main-background-color: whitesmoke; --main-text-color: #393e41ff; --main-text-color-dim: lightslategray; --aside-background-color: powderblue; --aside-text-color: #414770ff; --menubar-background-color: #414770ff; --menubar-item-color: whitesmoke; --menubar-active-background: #449dd1ff; --menubar-hover-color: #393e41ff; --menubar-hover-background: whitesmoke; --sidebar-menu-background: #414770ff; --sidebar-menu-item-color: whitesmoke; --sidebar-menu-active-background: #449dd1ff; --sidebar-menu-hover-color: #393e41ff; --sidebar-menu-hover-background: whitesmoke; --dropdown-menu-border: rgba(255, 255, 255, .5); --dropdown-profile-color: rgb(121, 200, 226); --table-header-background: #414770ff; --table-header-color: whitesmoke; --table-cell-background: rgb(219, 247, 247); --table-cell-color: #414770ff; --table-shadow-color: #414770ff; --button-primary-background: #449dd1ff; --button-primary-color: whitesmoke; --button-primary-background-hover: whitesmoke; --button-primary-color-hover: #449dd1ff; --button-secondary-background: whitesmoke; --button-secondary-color: #393e41ff; --button-secondary-background-hover: #393e41ff; --button-secondary-color-hover: whitesmoke; --button-action-background-color: whitesmoke; --button-action-edit-color: green; --button-action-trash-color: red; --button-action-hover-background-color: rgb(121, 200, 226); --form-color: #393e41ff; --form-background-color: whitesmoke; --form-title-color: 393e41ff; --form-color-focus: #449dd1ff; --form-input-background-color: whitesmoke; --form-input-color: #393e41ff; --form-input-background-color-focus: AliceBlue; --form-input-color-focus: black; --form-error-color: #d50000; --form-input-error-background-color: mistyrose; --form-input-error-color: #d50000; --form-input-color-valid: honeydew; --dialog-color: #393e41ff; --dialog-color-dim: lightslategray; --dialog-behind-background-color: rgba(0, 0, 0, 0.3); --dialog-content-background-color: whitesmoke; --dialog-shadow-color: rgba(0, 0, 0, 0.4); --dialog-title-color: 393e41ff; --dialog-color-focus: #449dd1ff; --checkbox-color: #449dd1ff; --checkbox-focus-color: rgb(2, 83, 129); --checkbox-background-focus-color: rgb(2, 84, 129, 0.1); --checkbox-disabled-color: lightgrey; --debug-color: black; --tooltip-color: whitesmoke; --tooltip-background-color: #449dd1ff; } :root[theme=dark] { --main-background-color: #393e41ff; --main-text-color: whitesmoke; --menubar-background-color: #414770ff; --menubar-item-color: whitesmoke; --menubar-active-background: #449dd1ff; --menubar-hover-color: #393e41ff; --menubar-hover-background: whitesmoke; --sidebar-menu-background: #414770ff; --sidebat-menu-item-color: whitesmoke; --sidebar-menu-active-background: #449dd1ff; --sidebar-menu-hover-color: #393e41ff; --sidebar-menu-hover-background: whitesmoke; --dropdown-menu-border: rgba(255, 255, 255, .5); --dropdown-profile-color: rgb(121, 200, 226); --table-shadow-color: whitesmoke; --form-color: whitesmoke; --form-input-background-color: whitesmoke; --form-input-color: #393e41ff; --form-input-background-color-focus: lightBlue; --form-input-color-focus: #393e41ff; --form-error-color: lightcoral; --form-input-error-background-color: pink; --form-input-error-color: #d50000; --debug-color: white; } /************************************************************** * Main Menu Bar Styling */ nav { display: flex; align-items: center; height: 40px; color: var(--menubar-item-color); background: var(--menubar-background-color); font-family: system-ui, sans-serif; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; } nav li a { padding: 10px; color: inherit; text-decoration: none; } @media (max-width: 599px) { nav li a { font-size: 14px; } } @media (min-width: 600px) { nav li a { font-size: 16px; } } nav li a:hover { color: var(--menubar-hover-color); background-color: var(--menubar-hover-background); } #homeMenuItem { display: flex; margin-left: 10px; } #homeMenuItem a { text-decoration: none; } #homeMenuItem:hover { color: var(--menubar-hover-color); background-color: var(--menubar-hover-background); background-image: url("/images/MageeLogo_menu38Hover.png"); } #adminMenu { display: none; } .menuGroup { margin: auto; padding-inline-start: 0px; } .loginIndicator a { padding: 10px; margin-right: 10px; color: inherit; text-decoration: none; cursor: pointer; } @media (max-width: 599px) { .loginIndicator a { font-size: 14px; } } @media (min-width: 600px) { .loginIndicator a { font-size: 16px; } } .loginIndicator a:hover { color: var(--menubar-hover-color); background-color: var(--menubar-hover-background); } .active { background-color: var(--menubar-active-background); } /************************************************************** * Content for Dropdown Menu */ .topDropdownMenu { position: absolute; right: 0; z-index: 5; text-align: left; font-size: 1rem; background-color: var(--menubar-background-color); color: var(--menubar-item-color); box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3); /* controls visable menu or not */ max-height: 0; max-height: 300; overflow: hidden; transition: all 400ms ease-out; opacity: 0.25; } @media (max-width: 599px) { .topDropdownMenu { width: 180px; font-size: 12px; } } @media (min-width: 600px) { .topDropdownMenu { width: 230px; font-size: 16px; } } .topDropdownMenu ul { margin: 0; padding: 0; } .topDropdownMenu li { list-style: none; display: block; } .topDropdownMenu a { display: block; padding: 10px; /* Stops coloring of link */ color: inherit; text-decoration: none; border-top: 1px solid var(--dropdown-menu-border); } .topDropdownMenu a:hover { background-color: var(--menubar-hover-background); } #topDropdownMenuProfileUserName { margin-left: 5px; } @media (max-width: 599px) { #topDropdownMenuProfileUserName { font-size: 12px; } } @media (min-width: 600px) { #topDropdownMenuProfileUserName { font-size: 14px; } } /************************************************************** * */ .topDropdownArea { position: absolute; right: 175px; top: 50px; text-align: left; font-size: 1rem; background-color: var(--main-background-color); color: var(--main-text-color); /* controls visable menu or not */ max-height: 0px; overflow: hidden; transition: all 400ms ease-out; opacity: 0; } @media (max-width: 599px) { .topDropdownArea { font-size: 0.7rem; width: calc(100% - 72px - 175px); } } @media (min-width: 600px) { .topDropdownArea { font-size: 1rem; width: calc(100% - 183px - 175px); } } .currentMenuLocation { background-color: var(--sidebar-menu-active-background); } .darkLightButton { padding: 5px 10px; background-color: black; color: white; margin: auto; } @media (max-width: 599px) { .darkLightButton { font-size: 6px; padding: 3px 5px; } } @media (min-width: 600px) { .darkLightButton { font-size: 8px; } } .darkLightButton:hover { background-color: grey; } button { box-sizing: border-box; cursor: pointer; align-self: center; padding: 0.75rem 1rem; text-decoration: none; text-align: center; font-family: system-ui, sans-serif; font-weight: 700; transition: transform 0.3s ease; } a.btn { display: inline-block; padding: 0.75rem 1rem; text-decoration: none; font-family: system-ui, sans-serif; font-weight: 700; transition: transform 0.3s ease; } button:disabled { opacity: 0.5; pointer-events: none; } .btn { border-radius: 0.6rem; margin-bottom: 5px; line-height: 1; } @media (max-width: 599px) { .btn { font-size: 0.8rem; } } @media (min-width: 600px) { .btn { font-size: 1rem; } } .btn:hover, .btn:focus { outline: 0; transform: translate(-1px, -1px); } .btn span.icon { padding-right: 5px; } .btn.btn__primary { color: var(--button-primary-color); background-color: var(--button-primary-background); border: 2px solid var(--button-primary-background); } .btn.btn__primary:hover, .btn.btn__primary:focus { background-color: var(--button-primary-background-hover); color: var(--button-primary-color-hover); border: 2px solid var(--button-primary-color-hover); box-shadow: 3px 3px 5px var(--button-primary-background); } .btn.btn__secondary { color: var(--button-secondary-color); background-color: var(--button-secondary-background); border: 2px solid var(--button-secondary-color); } .btn.btn__secondary:hover, .btn.btn__secondary:focus { background-color: var(--button-secondary-background-hover); color: var(--button-secondary-color-hover); border: 2px solid var(--button-secondary-background-hover); box-shadow: 3px 3px 5px var(--button-secondary-color); } .footer { display: flex; height: 30px; margin-top: auto; font-family: system-ui, sans-serif; font-size: x-small; background: var(--menubar-background-color); color: var(--menubar-item-color); justify-content: center; align-items: center; text-align: center; } /************************************************************** * Wrapper for Content Area Styling */ @media (max-width: 599px) { .mainWrapper { margin-left: 20px; font-size: 14px; } } @media (min-width: 600px) { .mainWrapper { margin-left: 20px; font-size: 16px; } } .banner img { width: 100%; display: block; } article { margin: 20px 20px; max-width: 80%; font-family: Georgia, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif; } article code { background-color: silver; padding: 10px; margin: 5px; border-radius: 5px; } article img { width: 90%; margin: 5px 0 0 0; } article h1, article h2, article h3, article h4, article h5, article h6 { font-family: system-ui, sans-serif; font-weight: bold; } .articleHeader img { width: 100%; } .bylineHeader { font-family: system-ui, sans-serif; font-size: 0.8em; } .articleTitle { margin: 20px 0 20px 0; font-family: system-ui, sans-serif; font-size: 1.25em; font-weight: bold; }