_tab.scss in askclass-course-theme-0.5.0

- old
+ new

@@ -1,35 +1,25 @@
-$color-bg: whitesmoke;
-$color-fg: #444;
-$size-font: 16px;
-
 @mixin special() {
-  color: $color-bg;
-  font-family: var(--specialFont);
+  color: var(--color-card-bg, 'whitesmoke');
+  font-family: var(--font-special);
 }
 
-html {
-  --bg: #{$color-bg};
-  --fg: #{$color-fg};
-  --fontSize: #{$size-font};
-}
-
 .card-tab {
   display: flex;
   flex-direction: column;
   position: relative;
-  background-image: linear-gradient(225deg, $color-fg 50%, transparent 50%);
+  background-image: linear-gradient(225deg, var(--color-card-fg) 50%, transparent 50%);
   background-size: 120px 27px;
   background-repeat: no-repeat;
   background-position: right top;
   border-radius: 2px;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
   border-top-width: 22px;
   border-top-style: solid;
-  border-top-color: $color-fg;
-  background-color: $color-bg;
-  color: $color-fg;
+  border-top-color: var(--color-card-fg);
+  background-color: var(--color-card-bg);
+  color: var(--color-card-fg);
   text-transform: none;
   height: calc(100% - 22px);
 }
 
 .top-bar {
@@ -66,13 +56,13 @@
   font-size: 20px;
   overflow: hidden;
   text-overflow: ellipsis;
   display: flex;
   align-items: flex-end;
-  font-family: var(--secondaryFont);
+  font-family: var(--font-secondary);
   a {
-    color: var(--bgColor);
+    color: var(--color-bg);
   }
 }
 
 .body {
   flex-grow: 2;
@@ -92,15 +82,15 @@
     border-top: 3px outset;
   }
   .item {
     margin-bottom: 20px;
     text-align: left;
-    font-size: $size-font;
+    font-size: var(--card-font-size);
     line-height: normal;
     h3 {
       margin: 3px 5px 0 5px;
-      color: $color-fg;
+      color: var(--color-card-fg);
     }
     .due {
       display: inline-flex;
       align-items: center;
       border-radius: 5px;
@@ -109,11 +99,11 @@
       .material-symbols-outlined {
         font-size: 1.3em;
         font-variation-settings: 'FILL' 1;
       }
       &.past {
-        background-color: var(--darkColor);
+        background-color: var(--color-dark);
       }
     }
     small {
       margin-left: 5px;
     }
@@ -128,25 +118,27 @@
   padding: 10px;
   display: flex;
   justify-content: space-between;
   a {
     text-decoration: none;
-    font-size: $size-font;
+    font-size: var(--card-font-size);
     display: contents;
     &.button {
       display: flex;
       border-radius: 5px;
       padding: 5px 10px;
       color: white!important;
-      background-color: $color-fg;
+      background-color: var(--color-card-fg);
       .material-symbols-outlined {
         font-variation-settings: 'FILL' 1;
       }
     }
   }
   .tags {
-    font-family: var(--secondaryFont);
+    font-family: var(--font-secondary);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 }
+
+@import "tab-colors";