Fix modal background and search icon (aframevr#837)

* Stylus doesn't know about the new rgb syntax, so it removed the alpha, revert to the stylus rgba function and ignore rules in stylelint

* Increase font-weight for modal title

* Remove non existing animatetop animation

* Fix search icon position in texture modal

Author: vincentfretin

src/style/index.styl

@@ -169,7 +169,7 @@ body.aframe-inspector-opened
     z-index 999999999
 
     svg
-      color rgb(219 97 162)
+      color rgb(219, 97, 162)
       fill currentColor
 
   .sponsor-btn:hover

src/style/scenegraph.styl

@@ -137,7 +137,7 @@
     background var(--color-base-300)
     border 1px solid var(--color-base-300)
     border-radius 4px
-    box-shadow 0 4px 12px rgb(0 0 0 / 30%)
+    box-shadow 0 4px 12px rgba(0, 0, 0, 0.3)
     max-height 300px
     overflow-y auto
     position absolute

src/style/textureModal.styl

@@ -1,7 +1,6 @@
 .modal
   animation animateopacity 0.2s ease-out
-  background-color rgb(0 0 0)
-  background-color rgb(0 0 0 / 60%)
+  background-color rgba(0, 0, 0, 0.6)
   display flex
   height 100%
   left 0
@@ -13,19 +12,16 @@
 
 .modal h3
   font-size 18px
-  font-weight 100
+  font-weight 600
   margin 0.6em 0
 
 #textureModal .modal-content
   height calc(100% - 50px)
   width calc(100% - 50px)
 
 .modal-content
-  animation animatetop 0.2s ease-out
-  animation-duration 0.2s
-  animation-name animatetop
   background-color var(--color-base-200)
-  box-shadow 0 4px 8px 0 rgb(0 0 0 / 50%), 0 6px 20px 0 rgb(0 0 0 / 50%)
+  box-shadow 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5)
   margin auto
   overflow hidden
   padding 0
@@ -70,7 +66,7 @@
 
 .gallery li
   border-radius 2px
-  box-shadow 0 0 6px rgb(0 0 0 / 60%)
+  box-shadow 0 0 6px rgba(0, 0, 0, 0.6)
   cursor pointer
   margin 8px
   overflow hidden
@@ -194,9 +190,14 @@
   position relative
   width 200px
 
+.assets.search input
+  box-sizing border-box
+  padding-right 20px
+  width 100%
+
 .assets.search svg
   position absolute
-  right 0
+  right 5px
   top 5px
 
 .new_asset_options

stylelint.config.js

@@ -3,6 +3,9 @@ module.exports = {
   plugins: ['stylelint-order'],
   ignoreFiles: ['src/style/themes.css'],
   rules: {
+    'alpha-value-notation': null,
+    'color-function-alias-notation': null,
+    'color-function-notation': null,
     'declaration-property-value-no-unknown': null,
     'import-notation': null,
     'media-feature-range-notation': 'prefix',