:root { --numDays: 5; --numHours: 13; --numHalfHours: 23; --numQuartHours: 45; --timeHeight: 60px; --halfTimeHeight: 30px; --quartTimeHeight: 15px; --calBgColor: #3f2d2d; --eventBorderColor: #000000; --eventColor1: #b82424; --eventColor2: #fafaa3; --eventColor3: #1894bb; --eventColor4: rgba(184, 36, 36, 0.65); } .calendar { display: grid; gap: 10px; grid-template-columns: auto 1fr; margin: 2rem; } select { width: 100%; height: 40px; border-radius: 5px; color: white; border-color: transparent; background-color: var(--calBgColor); text-align: center; } .userbuttons { width: 90%; position: absolute; display: flex; justify-content: end; } .changeweek { font-size: 2.5em; text-decoration: none; font-weight: 600; color: white; } .changeweek:hover { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 3px white; } h2 { font-weight: 300; margin: 5px; } .headerblock { display: flex; justify-content: space-between; padding-right: 20%; padding-left: 20%; } .customheader { display: flex; justify-content: space-evenly; } button { border-radius: 5px; border-color: white; color: white; border-style: solid; background: transparent; font-weight: 600; width: 30px; height: 30px; margin: 2px; line-height: 25px; } button:hover { cursor: pointer; } .plusbutton { font-size: 1.5em; } form { margin-top: 5px; } option { width: 300px; font-size: 1rem; } .timeline { display: grid; grid-template-rows: repeat(12, 58px); } .days { display: grid; grid-column: 2; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .events { display: grid; grid-template-rows: repeat(var(--numQuartHours), var(--quartTimeHeight)); border-radius: 5px; color: black; background: var(--calBgColor); } .title { width: 70%; font-weight: 600; margin-top: 0px; margin-bottom: 0px; } .room, .time { display: block; margin-top: 0px; margin-bottom: 0px; } .room { width: 70%; } .event { border: 1px solid var(--eventBorderColor); border-radius: 5px; padding: 0.5rem; margin: 0 0.5rem; color: white; background: var(--eventColor4); position: relative; } .space, .date { height: 100px; } body { font-family: "Asap", "Calibri", "Arial", sans-serif; color: white; background-color: black; } .date { margin-bottom: 1em; gap: 1em; } .date-num { font-size: 3rem; font-weight: 600; display: inline; } .date-day { display: inline; font-size: 3rem; font-weight: 100; } .cs1 { margin-left: 220px; padding: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #333; position: fixed; top: 0; left: 0; height: 100%; overflow-y: auto; font-size: 150%; } nav li { border-top: none; } nav li.top { border-style: solid; border-radius: 5px; border-color: white; margin: 10px; text-align: center; } nav a.top:hover { background: transparent; } nav li.start a { border-top: 3px solid white; margin-top: 20px; padding-top: 30px; } nav a.selected { color: red; background-color: black; } nav li.top.selected { border-color: red; } nav li a { display: block; color: white; padding: 12px 16px; text-decoration: none; } nav li a:hover { background-color: red; } nav li .bottom { position: absolute; bottom: 0; width: 200px; } .start-0100 { grid-row-start: 1; } .start-0115 { grid-row-start: 1; } .start-0130 { grid-row-start: 1; } .start-0145 { grid-row-start: 1; } .start-0200 { grid-row-start: 1; } .start-0215 { grid-row-start: 1; } .start-0230 { grid-row-start: 1; } .start-0245 { grid-row-start: 1; } .start-0300 { grid-row-start: 1; } .start-0315 { grid-row-start: 1; } .start-0330 { grid-row-start: 1; } .start-0345 { grid-row-start: 1; } .start-0400 { grid-row-start: 1; } .start-0415 { grid-row-start: 1; } .start-0430 { grid-row-start: 1; } .start-0445 { grid-row-start: 1; } .start-0500 { grid-row-start: 1; } .start-0515 { grid-row-start: 1; } .start-0530 { grid-row-start: 1; } .start-0545 { grid-row-start: 1; } .start-0600 { grid-row-start: 1; } .start-0615 { grid-row-start: 1; } .start-0630 { grid-row-start: 1; } .start-0645 { grid-row-start: 1; } .start-0700 { grid-row-start: 1; } .start-0715 { grid-row-start: 1; } .start-0730 { grid-row-start: 1; } .start-0745 { grid-row-start: 1; } .end-0100 { grid-row-end: 4; } .end-0115 { grid-row-end: 4; } .end-0130 { grid-row-end: 4; } .end-0145 { grid-row-end: 4; } .end-0200 { grid-row-end: 4; } .end-0215 { grid-row-end: 4; } .end-0230 { grid-row-end: 4; } .end-0245 { grid-row-end: 4; } .end-0300 { grid-row-end: 4; } .end-0315 { grid-row-end: 4; } .end-0330 { grid-row-end: 4; } .end-0345 { grid-row-end: 4; } .end-0400 { grid-row-end: 4; } .end-0415 { grid-row-end: 4; } .end-0430 { grid-row-end: 4; } .end-0445 { grid-row-end: 4; } .end-0500 { grid-row-end: 4; } .end-0515 { grid-row-end: 4; } .end-0530 { grid-row-end: 4; } .end-0545 { grid-row-end: 4; } .end-0600 { grid-row-end: 4; } .end-0615 { grid-row-end: 4; } .end-0630 { grid-row-end: 4; } .end-0645 { grid-row-end: 4; } .end-0700 { grid-row-end: 4; } .end-0715 { grid-row-end: 4; } .end-0730 { grid-row-end: 4; } .end-0745 { grid-row-end: 4; } .start-0800 { grid-row-start: 1; } .start-0815 { grid-row-start: 2; } .start-0830 { grid-row-start: 3; } .start-0845 { grid-row-start: 4; } .start-0900 { grid-row-start: 5; } .start-0915 { grid-row-start: 6; } .start-0930 { grid-row-start: 7; } .start-0945 { grid-row-start: 8; } .start-1000 { grid-row-start: 9; } .start-1015 { grid-row-start: 10; } .start-1030 { grid-row-start: 11; } .start-1045 { grid-row-start: 12; } .start-1100 { grid-row-start: 13; } .start-1115 { grid-row-start: 14; } .start-1130 { grid-row-start: 15; } .start-1145 { grid-row-start: 16; } .start-1200 { grid-row-start: 17; } .start-1215 { grid-row-start: 18; } .start-1230 { grid-row-start: 19; } .start-1245 { grid-row-start: 20; } .start-1300 { grid-row-start: 21; } .start-1315 { grid-row-start: 22; } .start-1330 { grid-row-start: 23; } .start-1345 { grid-row-start: 24; } .start-1400 { grid-row-start: 25; } .start-1415 { grid-row-start: 26; } .start-1430 { grid-row-start: 27; } .start-1445 { grid-row-start: 28; } .start-1500 { grid-row-start: 29; } .start-1515 { grid-row-start: 30; } .start-1530 { grid-row-start: 31; } .start-1545 { grid-row-start: 32; } .start-1600 { grid-row-start: 33; } .start-1615 { grid-row-start: 34; } .start-1630 { grid-row-start: 35; } .start-1645 { grid-row-start: 36; } .start-1700 { grid-row-start: 37; } .start-1715 { grid-row-start: 38; } .start-1730 { grid-row-start: 39; } .start-1745 { grid-row-start: 40; } .start-1800 { grid-row-start: 41; } .start-1815 { grid-row-start: 42; } .start-1830 { grid-row-start: 43; } .start-1845 { grid-row-start: 44; } .start-1900 { grid-row-start: 45; } .end-0800 { grid-row-end: 1; } .end-0815 { grid-row-end: 2; } .end-0830 { grid-row-end: 3; } .end-0845 { grid-row-end: 4; } .end-0900 { grid-row-end: 5; } .end-0915 { grid-row-end: 6; } .end-0930 { grid-row-end: 7; } .end-0945 { grid-row-end: 8; } .end-1000 { grid-row-end: 9; } .end-1015 { grid-row-end: 10; } .end-1030 { grid-row-end: 11; } .end-1045 { grid-row-end: 12; } .end-1100 { grid-row-end: 13; } .end-1115 { grid-row-end: 14; } .end-1130 { grid-row-end: 15; } .end-1145 { grid-row-end: 16; } .end-1200 { grid-row-end: 17; } .end-1215 { grid-row-end: 18; } .end-1230 { grid-row-end: 19; } .end-1245 { grid-row-end: 20; } .end-1300 { grid-row-end: 21; } .end-1315 { grid-row-end: 22; } .end-1330 { grid-row-end: 23; } .end-1345 { grid-row-end: 24; } .end-1400 { grid-row-end: 25; } .end-1415 { grid-row-end: 26; } .end-1430 { grid-row-end: 27; } .end-1445 { grid-row-end: 28; } .end-1500 { grid-row-end: 29; } .end-1515 { grid-row-end: 30; } .end-1530 { grid-row-end: 31; } .end-1545 { grid-row-end: 32; } .end-1600 { grid-row-end: 33; } .end-1615 { grid-row-end: 34; } .end-1630 { grid-row-end: 35; } .end-1645 { grid-row-end: 36; } .end-1700 { grid-row-end: 37; } .end-1715 { grid-row-end: 38; } .end-1730 { grid-row-end: 39; } .end-1745 { grid-row-end: 40; } .end-1800 { grid-row-end: 41; } .end-1815 { grid-row-end: 42; } .end-1830 { grid-row-end: 43; } .end-1845 { grid-row-end: 44; } .end-1900 { grid-row-end: 45; } /*# sourceMappingURL=cal.css.map */