use scalatags styles only explicitly

fixes accidental inline styles that should have been attributes. thanks @bigsee

app/ui/scalatags.scala

@@ -99,15 +99,16 @@ trait ScalatagsPrefix {
 
 // what to import in a pure scalatags template
 trait ScalatagsTemplate
-    extends Styles
-    with ScalatagsBundle
+    extends ScalatagsBundle
     with ScalatagsAttrs
     with ScalatagsExtensions
     with ScalatagsSnippets
     with ScalatagsPrefix {
 
-  val trans = lila.i18n.I18nKeys
-  def main  = scalatags.Text.tags2.main
+  val trans     = lila.i18n.I18nKeys
+  def main      = scalatags.Text.tags2.main
+  def cssWidth  = scalatags.Text.styles.width
+  def cssHeight = scalatags.Text.styles.height
 
   /* Convert play URLs to scalatags attributes with toString */
   implicit val playCallAttr = genericAttr[play.api.mvc.Call]

app/views/base/layout.scala

@@ -244,7 +244,7 @@ object layout {
             content := openGraph.fold(trans.siteDescription.txt())(o => o.description),
             name := "description"
           ),
-          link(rel := "mask-icon", href := assetUrl("logo/lichess.svg"), color := "black"),
+          link(rel := "mask-icon", href := assetUrl("logo/lichess.svg"), "color".attr := "black"),
           favicons,
           !robots option raw("""<meta content="noindex, nofollow" name="robots">"""),
           noTranslate,

app/views/base/notFound.scala

@@ -32,8 +32,8 @@ object notFound {
           iframe(
             src := assetUrl(s"vendor/ChessPursuit/bin-release/index.html"),
             st.frameborder := 0,
-            width := 400,
-            height := 500
+            widthA := 400,
+            heightA := 500
           ),
           p(cls := "credits")(
             a(href := "https://github.com/Saturnyn/ChessPursuit")("ChessPursuit"),

app/views/coach/picture.scala

@@ -46,8 +46,8 @@ object picture {
       img(
         widthA := Coach.imageSize,
         heightA := Coach.imageSize,
-        width := cssSize,
-        height := cssSize,
+        cssWidth := cssSize,
+        cssHeight := cssSize,
         cls := "picture",
         src := url(c.coach),
         alt := s"${c.user.titleUsername} Lichess coach picture"

app/views/coach/show.scala

@@ -97,8 +97,8 @@ object show {
             div(cls := "list")(
               profile.youtubeUrls.map { url =>
                 iframe(
-                  width := "256",
-                  height := "192",
+                  widthA := "256",
+                  heightA := "192",
                   src := url.value,
                   attr("frameborder") := "0",
                   frame.allowfullscreen

app/views/mobile.scala

@@ -47,16 +47,16 @@ object mobile {
             ),
             div(cls := "right-side")(
               img(
-                width := "437",
-                height := "883",
+                widthA := "437",
+                heightA := "883",
                 cls := "mobile-playing",
                 src := assetUrl("images/mobile/lichesstv-mobile.png"),
                 alt := "Lichess TV on mobile"
               ),
               img(
                 cls := "qrcode",
-                width := "200",
-                height := "200",
+                widthA := "200",
+                heightA := "200",
                 src := assetUrl("images/mobile/dynamic-qrcode.png"),
                 alt := "Download QR code"
               )

app/views/site/dailyPuzzleSlackApp.scala

@@ -25,8 +25,8 @@ object dailyPuzzleSlackApp {
           )(
             img(
               alt := "Add to Slack",
-              height := 40,
-              width := 139,
+              heightA := 40,
+              widthA := 139,
               src := assetUrl("images/add-to-slack.png")
             )
           ),

app/views/user/show/otherTrophies.scala

@@ -46,7 +46,7 @@ object otherTrophies {
           ariaTitle(t.kind.name),
           style := "width: 65px; margin: 0 3px!important;"
         )(
-          img(src := assetUrl(s"images/trophy/${t.kind._id}.png"), width := 65, height := 80)
+          img(src := assetUrl(s"images/trophy/${t.kind._id}.png"), cssWidth := 65, cssHeight := 80)
         )
       },
       info.trophies.filter(_.kind.klass.has("icon3d")).sorted.map { trophy =>