Convert inline CSS to themeable CSS vars

powe97 · Oct 16, 2023 · f1cd4ca · f1cd4ca
1 parent 307b680
commit f1cd4ca
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/site/src/assets/styles/colors.css b/site/src/assets/styles/colors.css
@@ -54,6 +54,12 @@
   --not-taken-course: #dc3545;
   --overlay-background: #f8f9fa;
 
+  /* Used for unofficial schedule warning */
+  --warning-font-size: 1.7rem;
+  --warning-border-style: solid;
+  --warning-border-width: 1px;
+  --warning-color: #f11;
+
   /* Calendar colors -- used to distinguish classes */
   --num-calendar-colors: 7;
 

diff --git a/site/src/assets/styles/global.css b/site/src/assets/styles/global.css
@@ -121,3 +121,15 @@ body {
 .list-group-item {
   background: var(--list-group-item-background);
 }
+
+.unofficial-schedule-warning {
+  text-align: center;
+  padding-top: 0.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding-bottom: 1rem;
+  font-size: var(--warning-font-size);
+  border-style: var(--warning-border-style);
+  border-width: var(--warning-border-width);
+  color: var(--warning-color);
+}
diff --git a/site/src/components/UnofficialScheduleWarning.vue b/site/src/components/UnofficialScheduleWarning.vue
@@ -2,19 +2,7 @@
   <div class="row" style="padding-top: 1rem">
     <div class="col-lg-1"></div>
     <div class="col-lg">
-      <div
-        style="
-          text-align: center;
-          padding-top: 0.5rem;
-          margin-left: 1rem;
-          margin-right: 1rem;
-          padding-bottom: 1rem;
-          font-size: 1.7rem;
-          border-style: solid;
-          border-width: 1px;
-          color: #ff1111;
-        "
-      >
+      <div class="unofficial-schedule-warning">
         QuACS is currently based off of incomplete data for this semester.<br />
         It is still largely a copy/paste of last year's schedule, and is heavily
         subject to change.<br />