Add high contrast rules for Minecraft/inverted toolbox (microsoft#7461)

Vivian Li · jwunderl · web-flow · commit 57438433232c · 2020-09-15T15:11:48.000-07:00
* Add inverted toolbox high contrast rules

* Remove useless rules

* Update theme/highcontrast.less

Co-authored-by: Joey Wunderlich &lt;jwunderl@users.noreply.github.com&gt;

* Fix to work with all targets

* Remove gradient from home screen header

Co-authored-by: Joey Wunderlich &lt;jwunderl@users.noreply.github.com&gt;
diff --git a/theme/highcontrast.less b/theme/highcontrast.less
@@ -115,6 +115,12 @@
         }
     }
 
+    .pxtToolbox {
+        .blocklyTreeRow:not(.blocklyTreeSelected) {
+            background-color: @HCblocklyToolboxColor !important;
+        }
+    }
+
     #monacoEditor .monacoDraggableBlock {
         background: none !important;
 
@@ -156,6 +162,11 @@
         stroke-width: 4px;
         stroke: @HCblocklyTreeLabelColor;
     }
+
+    .blocklyFlyoutButton .blocklyText {
+        fill: @HCtextColor !important;
+    }
+
     .monacoFlyout {
         background: @HCblocklySvgColor !important;
         border-right: 4px solid @HCtextColor !important;
@@ -170,6 +181,7 @@
 
     .blocklyFlyoutButtonBackground {
         stroke: @HCtextColor !important;
+        fill: transparent !important;
     }
 
     /* Main editor areas */
@@ -185,7 +197,7 @@
         }
     }
     svg.blocklySvg {
-        background-color: @HCblocklySvgColor !important;
+        background: @HCblocklySvgColor !important;
     }
 
     .blocklyMainBackground {
@@ -223,9 +235,9 @@
         }
     }
     #mainmenu.inverted, #homemenu.inverted {
-        background-color: @HCmainMenuTextColor !important;
         color: @HCmainMenuBackground !important;
         border-bottom: 4px solid @HCtextColor;
+        background: @HCmainMenuTextColor !important;
 
         .ui.item {
             color: @HCmainMenuBackground;
@@ -459,6 +471,14 @@
             }
         }
     }
+    .ui.card.link.newprojectcard{
+        background: darken(@primaryColor, 20%) !important;
+        color: white;
+    }
+
+    .ui.image~.content {
+        background: rgba(0,0,0,.75) !important;
+    }
 
     .ui.form .content .description {
         color: @HCtextColor;
@@ -734,4 +754,4 @@
         background: transparent !important;
         border-top: 0px;
     }
-}
+}
diff --git a/theme/themes/pxt/views/card.overrides b/theme/themes/pxt/views/card.overrides
@@ -245,7 +245,7 @@ a.ui.card:focus,
             top: 2rem;
             left: 1rem;
             width: 2rem;
-            height: 1.5rem;                
+            height: 1.5rem;
         }
     }
 

Original file line number	Diff line number	Diff line change
`@@ -115,6 +115,12 @@`
`115`	`115`	`}`
`116`	`116`	`}`
`117`	`117`
	`118`	`+ .pxtToolbox {`
	`119`	`+ .blocklyTreeRow:not(.blocklyTreeSelected) {`
	`120`	`+ background-color: @HCblocklyToolboxColor !important;`
	`121`	`+ }`
	`122`	`+ }`
	`123`	`+`
`118`	`124`	`#monacoEditor .monacoDraggableBlock {`
`119`	`125`	`background: none !important;`
`120`	`126`
`@@ -156,6 +162,11 @@`
`156`	`162`	`stroke-width: 4px;`
`157`	`163`	`stroke: @HCblocklyTreeLabelColor;`
`158`	`164`	`}`
	`165`	`+`
	`166`	`+ .blocklyFlyoutButton .blocklyText {`
	`167`	`+ fill: @HCtextColor !important;`
	`168`	`+ }`
	`169`	`+`
`159`	`170`	`.monacoFlyout {`
`160`	`171`	`background: @HCblocklySvgColor !important;`
`161`	`172`	`border-right: 4px solid @HCtextColor !important;`
`@@ -170,6 +181,7 @@`
`170`	`181`
`171`	`182`	`.blocklyFlyoutButtonBackground {`
`172`	`183`	`stroke: @HCtextColor !important;`
	`184`	`+ fill: transparent !important;`
`173`	`185`	`}`
`174`	`186`
`175`	`187`	`/* Main editor areas */`
`@@ -185,7 +197,7 @@`
`185`	`197`	`}`
`186`	`198`	`}`
`187`	`199`	`svg.blocklySvg {`
`188`		`- background-color: @HCblocklySvgColor !important;`
	`200`	`+ background: @HCblocklySvgColor !important;`
`189`	`201`	`}`
`190`	`202`
`191`	`203`	`.blocklyMainBackground {`
`@@ -223,9 +235,9 @@`
`223`	`235`	`}`
`224`	`236`	`}`
`225`	`237`	`#mainmenu.inverted, #homemenu.inverted {`
`226`		`- background-color: @HCmainMenuTextColor !important;`
`227`	`238`	`color: @HCmainMenuBackground !important;`
`228`	`239`	`border-bottom: 4px solid @HCtextColor;`
	`240`	`+ background: @HCmainMenuTextColor !important;`
`229`	`241`
`230`	`242`	`.ui.item {`
`231`	`243`	`color: @HCmainMenuBackground;`
`@@ -459,6 +471,14 @@`
`459`	`471`	`}`
`460`	`472`	`}`
`461`	`473`	`}`
	`474`	`+ .ui.card.link.newprojectcard{`
	`475`	`+ background: darken(@primaryColor, 20%) !important;`
	`476`	`+ color: white;`
	`477`	`+ }`
	`478`	`+`
	`479`	`+ .ui.image~.content {`
	`480`	`+ background: rgba(0,0,0,.75) !important;`
	`481`	`+ }`
`462`	`482`
`463`	`483`	`.ui.form .content .description {`
`464`	`484`	`color: @HCtextColor;`
`@@ -734,4 +754,4 @@`
`734`	`754`	`background: transparent !important;`
`735`	`755`	`border-top: 0px;`
`736`	`756`	`}`
`737`		`-}`
	`757`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -245,7 +245,7 @@ a.ui.card:focus,`
`245`	`245`	`top: 2rem;`
`246`	`246`	`left: 1rem;`
`247`	`247`	`width: 2rem;`
`248`		`- height: 1.5rem;`
	`248`	`+ height: 1.5rem;`
`249`	`249`	`}`
`250`	`250`	`}`
`251`	`251`