From 3bd16e87a2c48fe134b810f7e2e1443497eab52d Mon Sep 17 00:00:00 2001 From: ChaosEngine Date: Thu, 4 Jan 2024 20:37:34 +0100 Subject: [PATCH] optimizing SVG images #3 - revert to CSS background images due to conflicts with ContentSecurityPolicies --- DotnetPlayground.Web/wwwroot/css/site.css | 7 +++---- .../wwwroot/css/site.min.css.map | 2 +- DotnetPlayground.Web/wwwroot/css/site.scss | 18 +++++++----------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/DotnetPlayground.Web/wwwroot/css/site.css b/DotnetPlayground.Web/wwwroot/css/site.css index 83de3216..0070bd01 100644 --- a/DotnetPlayground.Web/wwwroot/css/site.css +++ b/DotnetPlayground.Web/wwwroot/css/site.css @@ -206,22 +206,21 @@ footer.container > noscript { /***social login svg icons***/ .registered-logins td, #external-account button { background-repeat: no-repeat; - background-size: contain; border: none; width: 80px; height: 72px; } #link-login-button-Facebook, #login-provider-Facebook { - background-image: url("https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M54.8 0H3.2A3.2 3.2 0 0 0 0 3.2v51.6A3.2 3.2 0 0 0 3.2 58H31V35.57h-7.55v-8.78H31v-6.46c0-7.49 4.58-11.57 11.26-11.57A64.2 64.2 0 0 1 49 9.1v7.83h-4.6c-3.64 0-4.35 1.72-4.35 4.26v5.59h8.7l-1.13 8.78H40V58h14.8a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 54.8 0Z' style='fill:%234267b2'/%3E%3Cpath d='M40 58V35.57h7.57l1.13-8.78H40V21.2c0-2.54.71-4.26 4.35-4.26H49V9.1a64.2 64.2 0 0 0-6.75-.34C35.56 8.76 31 12.84 31 20.33v6.46h-7.55v8.78H31V58Z' style='fill:%23fff'/%3E%3C/svg%3E"); } #link-login-button-Google, #login-provider-Google { - background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath style='fill:%23fbbb00' d='M113.47 309.408 95.648 375.94l-65.139 1.378C11.042 341.211 0 299.9 0 256c0-42.451 10.324-82.483 28.624-117.732h.014L86.63 148.9l25.404 57.644c-5.317 15.501-8.215 32.141-8.215 49.456.002 18.792 3.406 36.797 9.651 53.408z'/%3E%3Cpath style='fill:%23518ef8' d='M507.527 208.176C510.467 223.662 512 239.655 512 256c0 18.328-1.927 36.206-5.598 53.451-12.462 58.683-45.025 109.925-90.134 146.187l-.014-.014-73.044-3.727-10.338-64.535c29.932-17.554 53.324-45.025 65.646-77.911h-136.89V208.176h245.899z'/%3E%3Cpath style='fill:%2328b446' d='m416.253 455.624.014.014C372.396 490.901 316.666 512 256 512c-97.491 0-182.252-54.491-225.491-134.681l82.961-67.91c21.619 57.698 77.278 98.771 142.53 98.771 28.047 0 54.323-7.582 76.87-20.818l83.383 68.262z'/%3E%3Cpath style='fill:%23f14336' d='m419.404 58.936-82.933 67.896C313.136 112.246 285.552 103.82 256 103.82c-66.729 0-123.429 42.957-143.965 102.724l-83.397-68.276h-.014C71.23 56.123 157.06 0 256 0c62.115 0 119.068 22.126 163.404 58.936z'/%3E%3C/svg%3E"); } #link-login-button-Twitter, #login-provider-Twitter { - background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cpath d='M533.788 610.043H76.256C34.163 610.043 0 575.88 0 533.788V76.256C0 34.163 34.163 0 76.256 0h457.531c42.093 0 76.256 34.163 76.256 76.256v457.531c0 42.093-34.163 76.256-76.256 76.256z' style='fill:%231da1f2'/%3E%3Cpath d='M234.256 459.971c143.818 0 222.515-119.265 222.515-222.515 0-3.356 0-6.712-.151-10.066 15.252-10.982 28.52-24.858 39.041-40.568-14.031 6.253-29.128 10.37-44.99 12.352 16.166-9.609 28.52-25.013 34.467-43.315-15.098 8.999-31.876 15.403-49.719 18.911-14.338-15.252-34.62-24.707-57.04-24.707-43.16 0-78.237 35.077-78.237 78.237 0 6.1.763 12.048 1.983 17.845-64.968-3.201-122.618-34.467-161.205-81.746-6.712 11.59-10.524 25.013-10.524 39.347 0 27.148 13.879 51.092 34.771 65.123a79.103 79.103 0 0 1-35.382-9.761v1.069c0 37.823 26.994 69.544 62.681 76.713-6.557 1.83-13.42 2.744-20.588 2.744a76.805 76.805 0 0 1-14.64-1.373c9.913 31.112 38.89 53.685 73.053 54.293-26.841 21.046-60.547 33.553-97.15 33.553-6.253 0-12.506-.306-18.608-1.069 34.467 21.961 75.644 34.926 119.722 34.926' style='fill:%23fff'/%3E%3C/svg%3E"); } #link-login-button-GitHub, #login-provider-GitHub { diff --git a/DotnetPlayground.Web/wwwroot/css/site.min.css.map b/DotnetPlayground.Web/wwwroot/css/site.min.css.map index 1f9bda8b..af88d629 100644 --- a/DotnetPlayground.Web/wwwroot/css/site.min.css.map +++ b/DotnetPlayground.Web/wwwroot/css/site.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["site.css"],"names":[],"mappings":"iBAEA,KADA,KAEE,OAAQ,MAGV,KACE,SAAU,SAGZ,mCACE,KACE,MAAO,KACP,iBAAkB,QAE0B,kBAAjB,gBAAoC,qBAAnD,cAAd,aAAuF,kBACrF,MAAO,eACP,iBAAkB,kBAEpB,MACE,iBAAkB,mBAKtB,cACE,YAAa,OAIf,EACE,gBAAiB,KAEnB,+FACE,gBAAiB,UAGnB,0BACE,QAAS,KAIX,gDACE,MAAO,KAGT,kBACE,OAAQ,MAAO,EAIjB,QACE,OAAQ,KAUV,aACE,iBAAkB,QAGpB,mCACE,MAAO,KAGT,kBACE,SAAU,SACV,IAAK,EACL,KAAM,EACN,OAAQ,EACR,MAAO,EACP,QAAS,GACT,SAAU,OACV,MAAO,KACP,QAAS,KAGX,0BACE,MAAO,IAGT,kBACE,QAAS,yBAIX,sDACE,QAAS,IACT,QAAS,MACT,WAAY,OACZ,YAAa,IAEf,oCACE,WAAY,OACZ,cAAe,OAIjB,sBACE,gBAAiB,KAEnB,0BACE,MAAO,MACP,OAAQ,MAEV,gCACE,UAAW,eACX,WAAY,EAAI,EAAI,KAAK,eAG3B,kDACE,IAAK,IACL,KAAM,IACN,OAAQ,KAAK,KAAK,KAAK,KACvB,MAAO,KACP,OAAQ,KAIV,0BACE,cACE,MAAO,iBACP,OAAQ,gBAEV,gBACE,UAAW,kBAIf,iBACE,QAAS,EACT,WAAY,QAAQ,IAAK,SAE3B,8BACE,iBAAkB,iBAEpB,+BACE,iBAAkB,QAEpB,mCACE,QAAS,GAEX,0CACE,iBAAkB,iBAEpB,wBACE,iBAAkB,gBAClB,MAAO,qBACP,WAAY,WAAW,IAAK,SAI9B,6CACE,OAAQ,IAAI,MAAM,KAClB,WAAY,EAAE,EAAE,IAAI,IAAI,KACxB,UAAW,gBAEb,qCAEE,OAAQ,IAAI,OAAO,KACnB,WAAY,IAAM,IAEpB,iBACE,OAAQ,yCACR,QAAS,SAAS,gBAClB,SAAU,SACV,SAAU,OACV,UAAW,IACX,OAAQ,IAAI,MAAM,QAClB,cAAe,IACf,WAAY,MAEd,yBACE,QAAS,GACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,KACL,KAAM,KACN,QAAS,GACT,WAAY,YAAY,OACxB,UAAW,aAEb,wBACE,QAAS,GACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,EACL,KAAM,EACN,QAAS,GACT,iBAAkB,mBAIpB,uBACE,OAAQ,IAAI,MAAM,YAClB,aAAc,GAAG,8CAII,yBAAvB,sBACE,kBAAmB,UACnB,gBAAiB,QACjB,OAAQ,KACR,MAAO,KACP,OAAQ,KAGV,4BAA6B,yBAC3B,iBAAkB,qFAGpB,0BAA2B,uBACzB,iBAAkB,mFAGpB,2BAA4B,wBAC1B,iBAAkB,+EAGpB,0BAA2B,uBACzB,iBAAkB,w8BAGpB,mBACE,iBAAkB,kdAClB,kBAAmB,UACnB,QAAS,GACT,MAAO,KACP,OAAQ,KACR,cAAe","file":"site.min.css"} \ No newline at end of file +{"version":3,"sources":["site.css"],"names":[],"mappings":"iBAEA,KADA,KAEE,OAAQ,MAGV,KACE,SAAU,SAGZ,mCACE,KACE,MAAO,KACP,iBAAkB,QAE0B,kBAAjB,gBAAoC,qBAAnD,cAAd,aAAuF,kBACrF,MAAO,eACP,iBAAkB,kBAEpB,MACE,iBAAkB,mBAKtB,cACE,YAAa,OAIf,EACE,gBAAiB,KAEnB,+FACE,gBAAiB,UAGnB,0BACE,QAAS,KAIX,gDACE,MAAO,KAGT,kBACE,OAAQ,MAAO,EAIjB,QACE,OAAQ,KAUV,aACE,iBAAkB,QAGpB,mCACE,MAAO,KAGT,kBACE,SAAU,SACV,IAAK,EACL,KAAM,EACN,OAAQ,EACR,MAAO,EACP,QAAS,GACT,SAAU,OACV,MAAO,KACP,QAAS,KAGX,0BACE,MAAO,IAGT,kBACE,QAAS,yBAIX,sDACE,QAAS,IACT,QAAS,MACT,WAAY,OACZ,YAAa,IAEf,oCACE,WAAY,OACZ,cAAe,OAIjB,sBACE,gBAAiB,KAEnB,0BACE,MAAO,MACP,OAAQ,MAEV,gCACE,UAAW,eACX,WAAY,EAAI,EAAI,KAAK,eAG3B,kDACE,IAAK,IACL,KAAM,IACN,OAAQ,KAAK,KAAK,KAAK,KACvB,MAAO,KACP,OAAQ,KAIV,0BACE,cACE,MAAO,iBACP,OAAQ,gBAEV,gBACE,UAAW,kBAIf,iBACE,QAAS,EACT,WAAY,QAAQ,IAAK,SAE3B,8BACE,iBAAkB,iBAEpB,+BACE,iBAAkB,QAEpB,mCACE,QAAS,GAEX,0CACE,iBAAkB,iBAEpB,wBACE,iBAAkB,gBAClB,MAAO,qBACP,WAAY,WAAW,IAAK,SAI9B,6CACE,OAAQ,IAAI,MAAM,KAClB,WAAY,EAAE,EAAE,IAAI,IAAI,KACxB,UAAW,gBAEb,qCAEE,OAAQ,IAAI,OAAO,KACnB,WAAY,IAAM,IAEpB,iBACE,OAAQ,yCACR,QAAS,SAAS,gBAClB,SAAU,SACV,SAAU,OACV,UAAW,IACX,OAAQ,IAAI,MAAM,QAClB,cAAe,IACf,WAAY,MAEd,yBACE,QAAS,GACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,KACL,KAAM,KACN,QAAS,GACT,WAAY,YAAY,OACxB,UAAW,aAEb,wBACE,QAAS,GACT,SAAU,SACV,MAAO,KACP,OAAQ,KACR,IAAK,EACL,KAAM,EACN,QAAS,GACT,iBAAkB,mBAIpB,uBACE,OAAQ,IAAI,MAAM,YAClB,aAAc,GAAG,8CAII,yBAAvB,sBACE,kBAAmB,UACnB,OAAQ,KACR,MAAO,KACP,OAAQ,KAGV,4BAA6B,yBAC3B,iBAAkB,ikBAGpB,0BAA2B,uBACzB,iBAAkB,imCAGpB,2BAA4B,wBAC1B,iBAAkB,8mCAGpB,0BAA2B,uBACzB,iBAAkB,w8BAGpB,mBACE,iBAAkB,kdAClB,kBAAmB,UACnB,QAAS,GACT,MAAO,KACP,OAAQ,KACR,cAAe","file":"site.min.css"} \ No newline at end of file diff --git a/DotnetPlayground.Web/wwwroot/css/site.scss b/DotnetPlayground.Web/wwwroot/css/site.scss index d8df1c6d..0a49c3ed 100644 --- a/DotnetPlayground.Web/wwwroot/css/site.scss +++ b/DotnetPlayground.Web/wwwroot/css/site.scss @@ -277,28 +277,24 @@ footer.container > noscript { /***social login svg icons***/ .registered-logins td, #external-account button { background-repeat: no-repeat; - background-size: contain; + // background-size: contain; border:none; width:80px; height:72px } #link-login-button-Facebook, #login-provider-Facebook { - // background-image: svg-url(""); - background-image: url("https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"); + background-image: svg-url(""); + // background-image: url("https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg"); } #link-login-button-Google, #login-provider-Google { - // background-image: svg-url(""); - background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"); + background-image: svg-url(""); + // background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"); } #link-login-button-Twitter, #login-provider-Twitter { - // background-image: svg-url(""); - background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg"); + background-image: svg-url(""); + // background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg"); } -// #link-login-button-GitHub, #login-provider-GitHub { -// // background-image: svg-url(""); -// background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"); -// } #link-login-button-GitHub, #login-provider-GitHub { background-image: svg-url(""); }