diff --git a/src/web/assets/css/main.scss b/src/web/assets/css/main.scss index 648eb28..1075b29 100644 --- a/src/web/assets/css/main.scss +++ b/src/web/assets/css/main.scss @@ -269,12 +269,16 @@ body.has-modal #main { transition: opacity 0.15s ease; .region { - background: rgba($grey-dark, 0.9); - border: rgba($grey, 0.9); + background: rgba($grey, 0.6); color: $grey-lighter; border-radius: 100px; - padding: 0.2rem 0.35rem; + padding: 0.15rem 0.45rem 0.2rem; margin-left: 0.2rem; + + .icon { + vertical-align: bottom; + margin-right: 0.25rem; + } } } diff --git a/src/web/assets/img/region-eu.svg b/src/web/assets/img/region-eu.svg new file mode 100644 index 0000000..045024a --- /dev/null +++ b/src/web/assets/img/region-eu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/web/assets/img/region-jp.svg b/src/web/assets/img/region-jp.svg new file mode 100644 index 0000000..3a724e9 --- /dev/null +++ b/src/web/assets/img/region-jp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/web/assets/img/region-na.svg b/src/web/assets/img/region-na.svg new file mode 100644 index 0000000..d51f600 --- /dev/null +++ b/src/web/assets/img/region-na.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/web/components/AboutDialog.vue b/src/web/components/AboutDialog.vue index a1368da..7f51b42 100644 --- a/src/web/components/AboutDialog.vue +++ b/src/web/components/AboutDialog.vue @@ -24,6 +24,10 @@ Original SplatNet gear ability/price data comes from Inkipedia.

+

+ Regional flag icons are from + Twemoji. +

Source code for this site is available on GitHub. diff --git a/src/web/components/splatoon/SplatfestBox.vue b/src/web/components/splatoon/SplatfestBox.vue index 33e257f..8b94cb4 100644 --- a/src/web/components/splatoon/SplatfestBox.vue +++ b/src/web/components/splatoon/SplatfestBox.vue @@ -12,7 +12,13 @@

- {{ region | upperCase }} + + + + + {{ region | upperCase }} + +