phantop/quatalog-site
1
0
Fork 0
mirror of https://github.com/quatalog/site.git synced 2024-11-22 06:42:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor more CSS, create default theme file

Browse source
This commit is contained in:
3eef8a28f26fb2bcc514e6f1938929a1f931762 2023-04-04 17:24:56 -04:00 committed by powe97
parent 8a43fe3b71
commit 59f3e344b3
3 changed files with 73 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
css/coursedisplay.css
View file

@ -1,5 +1,5 @@
.term ::selection{ .term ::selection{
background: var(--quacs-yellow); background: var(--table-selection-color);
} }
#cd-flex{ #cd-flex{
@ -26,7 +26,7 @@
} }
#code { #code {
color: var(--quacs-midtone); color: var(--course-code-color);
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 900; font-weight: 900;
position: relative; position: relative;
@ -42,10 +42,10 @@
} }
.attr-pill{ .attr-pill{
color: var(--deep-purple); color: var(--pill-text-color);
position: relative; position: relative;
left: 0vw; left: 0vw;
background: var(--quacs-midtone); background: var(--pill-default-color);
border-radius: 2vmin; border-radius: 2vmin;
padding: 0.5vmin 1.5vmin; padding: 0.5vmin 1.5vmin;
margin-right: 0.5vmin; margin-right: 0.5vmin;
@ -72,11 +72,11 @@
} }
.course-pill{ .course-pill{
color: var(--deep-purple); color: var(--pill-text-color);
position: relative; position: relative;
left: 0vw; left: 0vw;
background: var(--quacs-yellow); background: var(--course-pill-color);
border-radius: 2vmin; border-radius: 2vmin;
padding: 0.5vmin 1.5vmin; padding: 0.5vmin 1.5vmin;
font-weight: 700; font-weight: 700;
@ -90,7 +90,7 @@
} }
.course-pill:hover{ .course-pill:hover{
background: var(--quacs-midtone); background: var(--course-pill-hover-color);
} }
#prereq-classes{ #prereq-classes{
@ -102,7 +102,7 @@
} }
.pr-or-con{ .pr-or-con{
background: var(--blue); background: var(--or-block-color);
display:grid; display:grid;
grid-auto-flow: row; grid-auto-flow: row;
height: fit-content; height: fit-content;
@ -114,7 +114,7 @@
} }
.pr-or-title{ .pr-or-title{
color: var(--quacs-white); color: var(--or-text-color);
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 700; font-weight: 700;
margin-bottom: 0.5vmin; margin-bottom: 0.5vmin;
@ -122,7 +122,7 @@
} }
.pr-or{ .pr-or{
background: var(--deep-purple); background: var(--or-block-bg-color);
padding: 1vmin; padding: 1vmin;
border-radius: 1.5vmin; border-radius: 1.5vmin;
display: flex; display: flex;
@ -145,10 +145,9 @@
display: inline; display: inline;
margin-left: 0.75vmin; margin-left: 0.75vmin;
margin-right: 0.75vmin; margin-right: 0.75vmin;
color: var(--quacs-white); color: var(--and-text-color);
background: var(--red); background: var(--and-block-color);
padding: 1vmin; padding: 1vmin;
color: var(--quacs-white);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 700; font-weight: 700;
width: min-content; width: min-content;
@ -158,8 +157,8 @@
} }
.none-rect{ .none-rect{
background: var(--red); background: var(--none-block-color);
color: var(--quacs-white); color: var(--none-text-color);
font-size: 2vmin; font-size: 2vmin;
position: relative; position: relative;
left: 0vw; left: 0vw;
@ -172,8 +171,8 @@
} }
.unknown-rect{ .unknown-rect{
background: var(--pink); background: var(--unknown-block-color);
color: var(--quacs-white); color: var(--unknown-text-color);
font-size: 2vmin; font-size: 2vmin;
position: relative; position: relative;
left: 0vw; left: 0vw;
@ -224,7 +223,7 @@
} }
.key-code{ .key-code{
color: var(--quacs-midtone); color: var(--key-text-color);
} }
.code-icon svg { .code-icon svg {
@ -239,16 +238,16 @@
} }
#yes-code-icon svg { #yes-code-icon svg {
fill: var(--green); fill: var(--yes-color);
} }
#no-code-icon svg { #no-code-icon svg {
fill: var(--red); fill: var(--no-color);
} }
#diff-code-icon svg { #diff-code-icon svg {
fill: var(--quacs-yellow); fill: var(--diff-code-color);
} }
#nil-code-icon svg { #nil-code-icon svg {
fill: var(--mid-light-purple); fill: var(--nil-color);
} }
#control-panel{ #control-panel{
@ -267,7 +266,7 @@
padding-bottom: 0.5vmin; padding-bottom: 0.5vmin;
padding-right: 0vmin; padding-right: 0vmin;
overflow: visible; overflow: visible;
fill: var(--quacs-midtone); fill: var(--view-select-color);
transition: fill .1s; transition: fill .1s;
} }
@ -283,7 +282,7 @@
} }
.term{ .term{
color: var(--deep-purple); color: var(--term-text-color);
font-size: 1.5vmin; font-size: 1.5vmin;
width: min-content; width: min-content;
/* word-break: break-all; */ /* word-break: break-all; */
@ -319,17 +318,17 @@ input[value="detailed"]:not(:checked) ~ div #detail-view-icon .view-icon-unselec
input[value="simple"]:checked ~ div #simple-view-label, input[value="simple"]:checked ~ div #simple-view-label,
input[value="detailed"]:checked ~ div #detail-view-label { input[value="detailed"]:checked ~ div #detail-view-label {
color: var(--quacs-yellow); color: var(--view-select-color-selected);
} }
.view-option-label { .view-option-label {
cursor: pointer; cursor: pointer;
transition: color .1s; transition: color .1s;
color: var(--quacs-midtone); color: var(--view-select-color);
} }
.view-icon-selected svg { .view-icon-selected svg {
fill: var(--quacs-yellow); fill: var(--view-select-color-selected);
} }
input[value="simple"]:checked ~ table .not-offered { input[value="simple"]:checked ~ table .not-offered {
@ -361,7 +360,6 @@ input[value="detailed"]:checked ~ table .detail-view-container {
padding-top: 1vmin; padding-top: 1vmin;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: var(--deep-purple);
} }
.term-course-info{ .term-course-info{
@ -373,9 +371,6 @@ input[value="detailed"]:checked ~ table .detail-view-container {
.term li{ .term li{
/* iffy on how these should go, */
/* word-break: break-word; */
/* hyphens: auto; */
width: fit-content; width: fit-content;
list-style-position: inside; list-style-position: inside;
padding-left: 0.5vmin; padding-left: 0.5vmin;
@ -393,39 +388,36 @@ input[value="detailed"]:checked ~ table .detail-view-container {
} }
.season-label{ .season-label{
color: var(--quacs-midtone); color: var(--season-label-color);
font-size: 1.4rem; font-size: 1.4rem;
} }
.midsum-label{ .midsum-label{
color: var(--quacs-white); color: var(--mid-summer-label-color);
white-space: break-spaces; white-space: break-spaces;
} }
.year{ .year{
color: var(--quacs-midtone); color: var(--year-label-color);
text-align: left; text-align: left;
width: 6vmin; width: 6vmin;
} }
.offered { .offered {
background-color: var(--green); background-color: var(--yes-color);
} }
.offered-diff-code { .offered-diff-code {
background-color: var(--quacs-yellow); background-color: var(--diff-code-color);
} }
.not-offered { .not-offered {
background-color: var(--red); background-color: var(--no-color);
height: 2rem; height: 2rem;
} }
.unscheduled { .unscheduled {
background-color: var(--mid-light-purple); background-color: var(--nil-color);
} }
@media (max-aspect-ratio: 5/4), (orientation: portrait){ @media (max-aspect-ratio: 5/4), (orientation: portrait){
#cd-flex{ #cd-flex{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

40
css/dark-theme.css Normal file
View file

@ -0,0 +1,40 @@
:root {
--search-title-color: var(--quacs-yellow);
--search-term-color: var(--quacs-midtone);
--search-entry-text-color: var(--quacs-white);
--search-entry-bg-color: var(--mid-dark-purple);
--search-entry-bg-hover-color: var(--mid-dark-purple);
--search-entry-title-color: var(--quacs-midtone);
--pill-default-color: var(--quacs-yellow);
--pill-text-color: var(--deep-purple);
--pill-svg-color: var(--deep-purple);
--ci-pill-color: var(--green);
--wi-pill-color: var(--quacs-yellow);
--course-pill-color: var(--quacs-yellow);
--course-pill-hover-color: var(--quacs-midtone);
--pdii-pill-color: var(--red);
--hinq-pill-color: var(--pink);
--table-selection-color: var(--quacs-yellow);
--course-name-color: var(--quacs-yellow);
--course-code-color: var(--quacs-midtone);
--or-block-color: var(--blue);
--or-block-bg-color: var(--deep-purple);
--or-text-color: var(--quacs-white);
--and-block-color: var(--red);
--and-text-color: var(--quacs-white);
--none-block-color: var(--red);
--none-text-color: var(--quacs-white);
--unknown-block-color: var(--pink);
--unknown-text-color: var(--quacs-white);
--key-text-color: var(--quacs-midtone);
--yes-color: var(--green);
--no-color: var(--red);
--diff-code-color: var(--quacs-yellow);
--nil-color: var(--mid-light-purple);
--view-select-color: var(--quacs-midtone);
--term-text-color: var(--deep-purple);
--view-select-color-selected: var(--quacs-yellow);
--season-label-color: var(--quacs-midtone);
--year-label-color: var(--quacs-midtone);
--mid-summer-label-color: var(--quacs-white);
}

16
css/search.css
View file

@ -1,20 +1,4 @@
:root { :root {
--search-title-color: var(--quacs-yellow);
--search-term-color: var(--quacs-midtone);
--search-entry-text-color: var(--quacs-white);
--search-entry-bg-color: var(--mid-dark-purple);
--search-entry-bg-hover-color: var(--mid-dark-purple);
--search-entry-title-color: var(--quacs-midtone);
--pill-default-color: var(--quacs-yellow);
--pill-text-color: var(--deep-purple);
--pill-svg-color: var(--deep-purple);
--ci-pill-color: var(--green);
--wi-pill-color: var(--quacs-yellow);
--pdii-pill-color: var(--red);
--hinq-pill-color: var(--pink);
--course-name-color: var(--quacs-yellow);
--course-code-color: var(--quacs-midtone);
--entry-width: 70vw; --entry-width: 70vw;
--hover-expand-width: 0.5vw; --hover-expand-width: 0.5vw;
--transition-time: 0.1s; --transition-time: 0.1s;