Skip to content

Commit

Permalink
optimizing SVG images #3 - revert to CSS background images due to con…
Browse files Browse the repository at this point in the history 
…flicts with ContentSecurityPolicies
  • Loading branch information
@ChaosEngine
ChaosEngine committed Jan 4, 2024
1 parent 1cfc71a commit 3bd16e8
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 16 deletions.
7 changes: 3 additions & 4 deletions DotnetPlayground.Web/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion DotnetPlayground.Web/wwwroot/css/site.min.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 7 additions & 11 deletions DotnetPlayground.Web/wwwroot/css/site.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path 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:#4267b2'/><path 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:#fff'/></svg>");
background-image: url("https://upload.wikimedia.org/wikipedia/en/0/04/Facebook_f_logo_%282021%29.svg");
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><path 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:#4267b2'/><path 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:#fff'/></svg>");
// 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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path style='fill:#fbbb00' 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'/><path style='fill:#518ef8' 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'/><path style='fill:#28b446' 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'/><path style='fill:#f14336' 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'/></svg>");
background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg");
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path style='fill:#fbbb00' 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'/><path style='fill:#518ef8' 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'/><path style='fill:#28b446' 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'/><path style='fill:#f14336' 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'/></svg>");
// 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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'><path 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:#1da1f2'/><path 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:#fff'/></svg>");
background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6f/Logo_of_Twitter.svg");
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'><path 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:#1da1f2'/><path 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:#fff'/></svg>");
// 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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 490 490'><path d='M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z'/></svg>");
// 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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><style>@media (prefers-color-scheme:dark){path{fill:#fff}}</style><path d='M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z'/></svg>");
}
Expand Down

0 comments on commit 3bd16e8

Please sign in to comment.