fix dark mode and layout of devices page

opatut · opatut · commit 5563f1d19a2a · 2024-03-04T20:55:54.000+01:00
diff --git a/assets/scss/dark.scss b/assets/scss/dark.scss
@@ -37,4 +37,7 @@
     background: adjust-color(green, $alpha: -0.8);
   }
 
+  .device-type-cell img {
+    filter: #{"invert()"};
+  }
 }
diff --git a/assets/scss/features.scss b/assets/scss/features.scss
@@ -346,7 +346,7 @@
 // Special device variants page
 
 .device-types-row {
-    background: #F8F8F8;
+    background: var(--background-1);
     padding: 0;
 }
 
@@ -378,7 +378,7 @@
     }
 
     &.light {
-        background: #FFF;
+      background: var(--background);
     }
 
     img {
@@ -399,6 +399,7 @@
     &.construction {
         .label {
             background: #ffd600;
+            color: black;
         }
         img {
             opacity: 0.3;
@@ -414,13 +415,18 @@
 
     ul {
         text-align: left;
-        // align-self: center;
+        padding-inline: 2rem;
     }
 
     .button {
       margin-top: auto;
       align-self: center;
     }
+
+    @media ($media-mobile) {
+      margin-inline: -1rem;
+      padding-inline: 1rem;
+    }
 }
 
 // Resistors

Original file line number	Diff line number	Diff line change
`@@ -37,4 +37,7 @@`
`37`	`37`	`background: adjust-color(green, $alpha: -0.8);`
`38`	`38`	`}`
`39`	`39`
	`40`	`+ .device-type-cell img {`
	`41`	`+ filter: #{"invert()"};`
	`42`	`+ }`
`40`	`43`	`}`
Original file line number	Diff line number	Diff line change
`@@ -346,7 +346,7 @@`
`346`	`346`	`// Special device variants page`
`347`	`347`
`348`	`348`	`.device-types-row {`
`349`		`- background: #F8F8F8;`
	`349`	`+ background: var(--background-1);`
`350`	`350`	`padding: 0;`
`351`	`351`	`}`
`352`	`352`
`@@ -378,7 +378,7 @@`
`378`	`378`	`}`
`379`	`379`
`380`	`380`	`&.light {`
`381`		`- background: #FFF;`
	`381`	`+ background: var(--background);`
`382`	`382`	`}`
`383`	`383`
`384`	`384`	`img {`
`@@ -399,6 +399,7 @@`
`399`	`399`	`&.construction {`
`400`	`400`	`.label {`
`401`	`401`	`background: #ffd600;`
	`402`	`+ color: black;`
`402`	`403`	`}`
`403`	`404`	`img {`
`404`	`405`	`opacity: 0.3;`
`@@ -414,13 +415,18 @@`
`414`	`415`
`415`	`416`	`ul {`
`416`	`417`	`text-align: left;`
`417`		`- // align-self: center;`
	`418`	`+ padding-inline: 2rem;`
`418`	`419`	`}`
`419`	`420`
`420`	`421`	`.button {`
`421`	`422`	`margin-top: auto;`
`422`	`423`	`align-self: center;`
`423`	`424`	`}`
	`425`	`+`
	`426`	`+ @media ($media-mobile) {`
	`427`	`+ margin-inline: -1rem;`
	`428`	`+ padding-inline: 1rem;`
	`429`	`+ }`
`424`	`430`	`}`
`425`	`431`
`426`	`432`	`// Resistors`