Something went wrong. Try again.
Codelabs for major subjects in the BSIT course at STI College Meycauayan. gitlab.com/andreijiroh-dev/labs/studentops-codelab
codelabs labs
Something went wrong. Try again.
2.2 kB · 127 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127:root { color-scheme: light dark; --bg-color: #ffffff; --text-color: #000000; --surface-color: #ffffff; --border-color: #767676;}@media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; --text-color: #ffffff; --surface-color: #242424; --border-color: #a6a6a6; }}body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease-in; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 1rem; width: 100%;}
.tabContainer { display: flex; gap: 5px; border-bottom: 1px solid var(--border-color);}
.tabButton { background-color: transparent; border: 1px solid transparent; border-bottom-color: var(--border-color); color: var(--text-color); cursor: pointer; padding: 8px 16px;}
.tabButton:hover,.tabButton:focus-visible { background-color: var(--surface-color); border-color: var(--border-color); outline: none;}
.tabButton.active { background-color: var(--surface-color); border-color: var(--border-color); border-bottom-color: var(--surface-color); margin-bottom: -1px;}
#profileForm { width: 150px; display: flex;}
#profileForm div { padding: 5px;}
#gradesForm { display: flex; flex-direction: column; width: fit-content;}
#gradesGrid { display: flex; flex-direction: column; gap: 5px;}
.gradesHeader,.gradeRow { display: grid; grid-template-columns: 150px 300px 75px 100px; align-items: center; gap: 5px;}
.gradesHeader { font-weight: 700;}
.gradesHeader span:first-child { grid-column: 1 / 3;}
.gradesHeader span:last-child { grid-column: 4;}
.gradeRow label { padding-left: 5px;}
input { background-color: var(--surface-color); border: 1px solid var(--border-color); width: 100%; box-sizing: border-box; color: var(--text-color); margin-top: 5px;}
#surname { width: 150px;}
#firstName { width: 150px;}
#middleInitial { width: 90px;}
#submit { background-color: var(--surface-color); border: 1px solid var(--border-color); color: var(--text-color); border-radius: 10px; margin: 10px; padding: 5px 10px;}