diff --git a/assets/css/_common/outline/footer/index.scss b/assets/css/_common/outline/footer/index.scss index c07848a..3d7a3ee 100644 --- a/assets/css/_common/outline/footer/index.scss +++ b/assets/css/_common/outline/footer/index.scss @@ -29,7 +29,143 @@ font-size: $font-size-smallest; } - .google-translate { + .i18n-translate { + display: flex; + justify-content: center; + + .fa { + font-size: $font-size-largest; + margin: auto 0; + line-height: normal; + } + + .lang-select, .lang-options { + + .flag-icon { + background-size: cover; + width: 30px; + height: 20px; + display: none; + } + + .flag-icon-zh-cn { + background-image: url("/imgs/flags/zh-CN.png"); + } + + .flag-icon-en-us { + background-image: url("/imgs/flags/en-US.png"); + } + + .flag-icon-fr-fr { + background-image: url("/imgs/flags/fr-FR.png"); + } + } + + .lang-select { + + .flag-icon { + display: block; + } + } + + .lang-select { + margin-left: 16px; + position: relative; + display: inline-block; + line-height: 1.25; + + .fa { + font-size: $font-size-large; + } + + .selected-option { + display: flex; + align-items: center; + cursor: pointer; + padding: 5px; + border: 1px solid #ccc; + border-radius: 4px; + justify-content: center; + width: 140px; + + /* &:hover { + + .lang-options { + display: block; + opacity: 1; + transform: translateY(0); + } + } */ + + .selected-language { + margin: 0 10px; + } + } + + .lang-options { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + border: 1px solid var(--border-color); + border-top: none; + border-radius: 0 0 4px 4px; + background-color: #ffffff; + opacity: 0; + transform: translateY(-10px); + transition: opacity 0.3s ease, transform 0.3s ease; + z-index: 1; + + &:hover { + display: block; + opacity: 1; + transform: translateY(0); + } + + .lang-option { + padding: 5px; + cursor: pointer; + display: flex; + justify-content: left; + padding-left: 14px; + + &:hover { + background-color: var(--selection-bg); + } + + .lang-name { + margin: 0 16px 0 8px; + } + } + } + } + } + + /* select { + margin-left: 10px; + + option { + font-size: $font-size-small; + background-repeat: no-repeat; + background-position: right center; + padding-right: 30px; + background-size: cover; + } + } + + .flag-icon-zh-cn { + background-image: url("../imgs/flags/zh-CN.png"); + } + + .flag-icon-en-us { + background-image: url("../imgs/flags/en-US.png"); + } + + .flag-icon-fr-fr { + background-image: url("../imgs/flags/fr-FR.png"); + } + } */ + /* .google-translate { display: flex; justify-content: center; .fa { @@ -37,7 +173,7 @@ margin: auto 0; line-height: normal; } - } + } */ @if $footer_vendors_enable { .vendors-list { diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index b6c3ed2..1fe057c 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -60,6 +60,7 @@ NexT.boot.registerEvents = function() { NexT.boot.refresh = function() { NexT.utils.fmtSiteInfo(); + NexT.utils.registerLangSelect(); if (!NexT.CONFIG.page.isPage) return; diff --git a/assets/js/utils.js b/assets/js/utils.js index 1050fca..16430f0 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -499,22 +499,59 @@ NexT.utils = { const isSubPath = !NexT.CONFIG.root.startsWith(target.pathname) && location.pathname.startsWith(target.pathname); target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath)); }); - }, + },*/ registerLangSelect: function() { - const selects = document.querySelectorAll('.lang-select'); - selects.forEach(sel => { - sel.value = NexT.CONFIG.page.lang; - sel.addEventListener('change', () => { - const target = sel.options[sel.selectedIndex]; - document.querySelectorAll('.lang-select-label span').forEach(span => { - span.innerText = target.text; - }); - // Disable Pjax to force refresh translation of menu item - window.location.href = target.dataset.href; + let selects = document.getElementById('lang-select'); + if (!selects) return; + + let selected = selects.querySelector('#lang-selected'); + let selectedVal = selected.querySelectorAll('span'); + let flagIcon = selectedVal[0]; + let langName = selectedVal[1]; + let selectIcon = selected.querySelector('i'); + + + let options = selects.querySelectorAll('#lang-options>div'); + let optionsDom = options[0].parentNode; + options.forEach(option => { + option.addEventListener('click', () => { + let langCode = option.getAttribute('lang-code'); + flagIcon.className = 'flag-icon flag-icon-'+langCode; + langName.innerHTML = option.getAttribute('lang-name'); + selectIcon.className = 'fa fa-chevron-down'; + optionsDom.style.opacity = '0'; + optionsDom.style.transform = 'translateY(-10px)'; + + const currentUrl = window.location.href; + const newUrl = currentUrl.replace(/(\/[^\/]+)?(\/[^\/]+)?$/, `/${langCode}$1$2`); + + setTimeout(() => { + optionsDom.style.display = 'none'; + window.location.href = newUrl; + }, 300); }); + }); + + selected.addEventListener('mouseenter', function() { + selectIcon.className = 'fa fa-chevron-up'; + optionsDom.style.display = 'block'; + optionsDom.style.opacity = '1'; + optionsDom.style.transform = 'translateY(0)'; + }); - },*/ + + optionsDom.addEventListener('mouseleave', function() { + selectIcon.className = 'fa fa-chevron-down'; + optionsDom.style.opacity = '0'; + optionsDom.style.transform = 'translateY(-10px)'; + + setTimeout(() => { + optionsDom.style.display = 'none'; + }, 300); + }); + + }, registerSidebarTOC: function () { const toc = document.getElementById('TableOfContents'); diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 24bfa31..1756d3f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,10 +1,23 @@ {{ $ft := .Site.Params.footer }} -{{ if $ft.translate }} -
+
-
+
+
+ + {{ .Site.Language.LanguageName }} + +
+
+ {{ range .Site.Languages }} +
+ + {{ .LanguageName }} +
+ {{ end }} +
+
+
-{{ end }}
© diff --git a/layouts/partials/head/script/global.html b/layouts/partials/head/script/global.html index 419a625..7366bdc 100644 --- a/layouts/partials/head/script/global.html +++ b/layouts/partials/head/script/global.html @@ -105,11 +105,6 @@ {{ $nextjs = $nextjs | append $lawt }} {{ end }} {{ end }} -{{ if .Site.Params.footer.translate }} -{{ $translate := resources.Get "js/3rd/others/translate.js" }} -{{ $nextjs = $nextjs | append $translate }} -{{ end }} - {{ $nextjs = $nextjs | resources.Concat "js/main.js"}} {{ if hugo.IsProduction }} diff --git a/layouts/partials/init.html b/layouts/partials/init.html index 38b66ee..dae2fdd 100644 --- a/layouts/partials/init.html +++ b/layouts/partials/init.html @@ -49,6 +49,7 @@ "lazyload" .Site.Params.lazyload "motion" .Site.Params.motion "i18n" (dict + "enable" .Site.Params.footer.translate "placeholder" (T "Search.placeholder") "empty" (T "Search.empty") "hits_time" (T "Search.time") diff --git a/layouts/partials/widgets.html b/layouts/partials/widgets.html index c54b603..892bb37 100644 --- a/layouts/partials/widgets.html +++ b/layouts/partials/widgets.html @@ -4,11 +4,9 @@
{{ end }} - {{ if .Site.Params.footer.translate }}
- {{ end }}
diff --git a/static/css/google-translate.min.css b/static/css/google-translate.min.css deleted file mode 100644 index 2ba6c46..0000000 --- a/static/css/google-translate.min.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";:root{--gt-blue:#2640b2;--gt-border:#d1d5db}@keyframes "goog-te-spinner-rotator"{0%{transform:rotate(0)}100%{transform:rotate(270deg)}}@keyframes "goog-te-spinner-dash"{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}.goog-te-banner-frame{left:0;top:0;height:39px;width:100%;z-index:10000001;position:fixed;border:none;border-bottom:1px solid #6b90da;margin:0;box-shadow:0 0 8px 1px #999999;_position:absolute}.goog-te-menu-frame{z-index:10000002;position:fixed;box-shadow:.5rem .875rem 2.375rem rgba(39,44,49,6%),.0625rem .1875rem .5rem rgba(39,44,49,3%);_position:absolute}.goog-te-ftab-frame{z-index:10000000;border:none;margin:0}.goog-te-gadget{font-family:arial;font-size:11px;color:#666;white-space:nowrap;display:inline-flex}.goog-te-gadget img{vertical-align:middle;border:none;display:inline-block}.goog-te-gadget .goog-te-combo{margin:4px 0}.goog-te-gadget div:first-child{margin:0 10px}.goog-te-gadget-simple{background-color:#fff;border-left:1px solid #d5d5d5;border-top:1px solid #9b9b9b;border-bottom:1px solid #e8e8e8;border-right:1px solid #d5d5d5;font-size:10pt;display:inline-block;padding-top:1px;padding-bottom:2px;cursor:pointer;zoom:1;*display:inline}.goog-te-gadget-simple .goog-te-menu-value{color:#000}.goog-te-gadget-simple .goog-te-menu-value span{text-decoration:none}.goog-te-gadget-icon{margin-left:2px;margin-right:2px;width:19px;height:19px;border:none;vertical-align:middle}.goog-te-combo{margin-left:4px;margin-right:4px;vertical-align:baseline;*vertical-align:middle;font-family:arial;font-size:10pt}.goog-logo-link{font-size:12px;font-weight:700;color:#444;text-decoration:none;margin:0 5px;border-bottom:0}.goog-logo-link:link{font-size:12px;font-weight:700;color:#444;text-decoration:none}.goog-logo-link:visited{font-size:12px;font-weight:700;color:#444;text-decoration:none}.goog-logo-link:hover{font-size:12px;font-weight:700;color:#444;text-decoration:none}.goog-logo-link:active{font-size:12px;font-weight:700;color:#444;text-decoration:none}.goog-te-banner{margin:0;background-color:#fff;overflow:hidden}.goog-te-banner .goog-logo-link{display:block;margin:0 10px;padding-top:2px;padding-left:4px}.goog-te-banner *{font-family:arial;font-size:10pt}.goog-te-banner img{border:none}.goog-te-banner table tbody tr td:nth-child(2){display:none}.goog-close-link{display:block;margin:0 10px}.goog-te-ftab{margin:0;background-color:#fff;white-space:nowrap}.goog-te-ftab *{font-family:arial;font-size:10pt}.goog-te-menu{background-color:#fff;text-decoration:none;border:2px solid #c3d9ff;overflow-y:scroll;overflow-x:hidden;position:absolute;left:0;top:0}.goog-te-menu *{font-family:arial;font-size:10pt}.goog-te-menu2{background-color:#fff;text-decoration:none;overflow:hidden;padding:4px;border:1px solid var(--gt-border);border-radius:4px}.goog-te-menu2 *{font-family:arial;font-size:10pt}.goog-te-balloon{background-color:#fff;overflow:hidden;padding:8px;border:none;border-radius:10px}.goog-te-balloon *{font-family:arial;font-size:10pt}.goog-te-balloon img{border:none}.goog-te-banner-content{color:#000}.goog-te-banner-content img{vertical-align:middle}.goog-te-banner-info{color:#666;vertical-align:top;margin-top:0;font-size:7pt}.goog-te-banner-margin{width:8px}.goog-te-button div{border:1px solid var(--gt-border);height:20px}.goog-te-button button{background:0 0;border:none;cursor:pointer;height:20px;overflow:hidden;margin:0;vertical-align:top;white-space:nowrap}.goog-te-button button:active{background:repeat #ccc}.goog-te-ftab-link{text-decoration:none;font-weight:700;font-size:10pt;border:1px outset #888;padding:6px 10px;white-space:nowrap;position:absolute;left:0;top:0}.goog-te-ftab-link img{margin-left:2px;margin-right:2px;width:19px;height:19px;border:none;vertical-align:middle}.goog-te-ftab-link span{text-decoration:underline;margin-left:2px;margin-right:2px;vertical-align:middle}.goog-float-top .goog-te-ftab-link{padding:2px;border-top-width:0}.goog-float-bottom .goog-te-ftab-link{padding:2px;border-bottom-width:0}.goog-te-menu-value{text-decoration:none;color:var(--gt-blue);white-space:nowrap;margin-left:4px;margin-right:4px}.goog-te-menu-value span{text-decoration:underline}.goog-te-menu-value span::after{content:"▼"}.goog-te-menu-value img{margin-left:2px;margin-right:2px;display:none}.goog-te-menu-item{padding:3px;text-decoration:none;color:var(--gt-blue);background:#fff}.goog-te-menu-item:link{color:var(--gt-blue);background:#fff}.goog-te-menu-item:visited{color:#551a8b}.goog-te-menu-item:hover{background:#c3d9ff}.goog-te-menu-item:active{color:var(--gt-blue)}.goog-te-menu2-colpad{width:16px}.goog-te-menu2-separator{margin:6px 0;height:1px;background-color:var(--gt-border);overflow:hidden}.goog-te-menu2-item{text-decoration:none}.goog-te-menu2-item div{padding:4px;color:var(--gt-blue);background:#fff}.goog-te-menu2-item .indicator{display:none}.goog-te-menu2-item:link div{color:var(--gt-blue);background:#fff}.goog-te-menu2-item:visited div{color:var(--gt-blue);background:#fff}.goog-te-menu2-item:active div{color:var(--gt-blue);background:#fff}.goog-te-menu2-item:hover div{color:#fff;background:#36c;border-radius:2px}.goog-te-menu2-item-selected{text-decoration:none}.goog-te-menu2-item-selected div{padding:4px;color:#000;font-weight:700}.goog-te-menu2-item-selected .indicator{display:auto}.goog-te-menu2-item-selected .text{padding-left:4px;padding-right:4px}.goog-te-menu2-item-selected:link div{color:#000;font-weight:700}.goog-te-menu2-item-selected:visited div{color:#000;font-weight:700}.goog-te-menu2-item-selected:hover div{color:#000;font-weight:700}.goog-te-menu2-item-selected:active div{color:#000;font-weight:700}.goog-te-balloon-frame{background-color:#fff;border:1px solid #6b90da;box-shadow:.5rem .875rem 2.375rem rgba(39,44,49,6%),.0625rem .1875rem .5rem rgba(39,44,49,3%);border-radius:8px}.goog-te-balloon-text{margin-top:6px}.goog-te-balloon-zippy{margin-top:6px;white-space:nowrap}.goog-te-balloon-zippy *{vertical-align:middle}.goog-te-balloon-zippy .minus{background-image:url(//www.google.com/images/zippy_minus_sm.gif)}.goog-te-balloon-zippy .plus{background-image:url(//www.google.com/images/zippy_plus_sm.gif)}.goog-te-balloon-zippy span{color:#00c;text-decoration:underline;cursor:pointer;margin:0 4px}.goog-te-balloon-form{margin:6px 0 0}.goog-te-balloon-form form{margin:0}.goog-te-balloon-form form textarea{margin-bottom:4px;width:100%}.goog-te-balloon-footer{margin:6px 0 4px}.goog-te-spinner-pos{z-index:1000;position:fixed;transition-delay:.6s;left:-1000px;top:-1000px}.goog-te-spinner-animation{background:#ccc;display:flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:50px;background:#fff url(//www.gstatic.com/images/branding/product/2x/translate_24dp.png)50% no-repeat;transition:all .6s ease-in-out;transform:scale(.4);opacity:0}.goog-te-spinner-animation-show{transform:scale(.5);opacity:1}.goog-te-spinner{margin:2px 0 0 2px;animation:goog-te-spinner-rotator 1.4s linear infinite}.goog-te-spinner-path{stroke-dasharray:187;stroke-dashoffset:0;stroke:#4285f4;transform-origin:center;animation:goog-te-spinner-dash 1.4s ease-in-out infinite}#goog-gt-tt{color:#222;background-color:#fff;border:1px solid #eee;box-shadow:0 4px 16px rgba(0,0,0,.2);display:none;font-family:arial;font-size:10pt;width:420px;padding:12px;position:absolute;z-index:10000}#goog-gt-tt .original-text{clear:both;font-size:10pt;position:relative;text-align:justify;width:100%}#goog-gt-tt .title{color:#999;font-family:arial,sans-serif;margin:4px 0;text-align:left}#goog-gt-tt .close-button{display:none}#goog-gt-tt .logo{float:left;margin:0}#goog-gt-tt .activity-links{display:inline-block}#goog-gt-tt .started-activity-container{display:none;width:100%}#goog-gt-tt .activity-root{margin-top:20px}#goog-gt-tt .left{float:left}#goog-gt-tt .right{float:right}#goog-gt-tt .bottom{min-height:15px;position:relative;height:1%}#goog-gt-tt .status-message{background:linear-gradient(top,#29910d 0%,#20af0e 100%);background:#29910d;border-radius:4px;box-shadow:inset 0 2px 2px #1e6609;color:#fff;font-size:9pt;font-weight:bolder;margin-top:12px;padding:6px;text-shadow:1px 1px 1px #1e6609}#goog-gt-tt .activity-link{color:#15c;cursor:pointer;font-family:arial;font-size:11px;margin-right:15px;text-decoration:none}#goog-gt-tt textarea{font-family:arial;resize:vertical;width:100%;margin-bottom:10px;border-radius:1px;border:1px solid #d9d9d9;border-top:1px solid silver;font-size:13px;height:auto;overflow-y:auto;padding:1px}#goog-gt-tt textarea:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);border:1px solid #4d90fe;outline:none}#goog-gt-tt .activity-cancel{margin-right:10px}#goog-gt-tt .translate-form{min-height:25px;vertical-align:middle;padding-top:8px}#goog-gt-tt .translate-form .activity-form{margin-bottom:5px;margin-bottom:0}#goog-gt-tt .translate-form .activity-form input{display:inline-block;min-width:54px;*min-width:70px;border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,.1);text-align:center;color:#444;font-size:11px;font-weight:700;height:27px;outline:0;padding:0 8px;vertical-align:middle;line-height:27px;margin:0 16px 0 0;box-shadow:0 1px 2px rgba(0,0,0,.1);border-radius:2px;transition:all .218s;background-color:#f5f5f5;background-image:linear-gradient(top,#f5f5f5,#f1f1f1);-webkit-user-select:none;-moz-user-select:none;cursor:default}#goog-gt-tt .translate-form .activity-form input:hover{border:1px solid #c6c6c6;color:#222;transition:all 0s;background-color:#f8f8f8;background-image:linear-gradient(top,#f8f8f8,#f1f1f1);border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input:active{border:1px solid #c6c6c6;color:#333;background-color:#f6f6f6;background-image:linear-gradient(top,#f6f6f6,#f1f1f1);border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input:focus{outline:none;border:1px solid #4d90fe;z-index:4!important;border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input:focus #goog-gt-tt .translate-form .activity-form input.focus #goog-gt-tt .translate-form .activity-form input:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}#goog-gt-tt .translate-form .activity-form input:focus:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}#goog-gt-tt .translate-form .activity-form input.focus:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}#goog-gt-tt .translate-form .activity-form input.focus{outline:none;border:1px solid #4d90fe;z-index:4!important;border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input.selected{background-color:#eee;background-image:linear-gradient(top,#eeeeee,#e0e0e0);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);border:1px solid #ccc;color:#333}#goog-gt-tt .translate-form .activity-form input.activity-submit{color:#fff;border-color:#3079ed;background-color:#4d90fe;background-image:linear-gradient(top,#4d90fe,#4787ed)}#goog-gt-tt .translate-form .activity-form input.activity-submit:hover{box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input.activity-submit:hover #goog-gt-tt .translate-form .activity-form input.activity-submit:focus{border-color:#3079ed;background-color:#357ae8;background-image:linear-gradient(top,#4d90fe,#357ae8)}#goog-gt-tt .translate-form .activity-form input.activity-submit:focus{border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input.activity-submit:active{border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input.activity-submit.focus{border-color:#3079ed}#goog-gt-tt .translate-form .activity-form input.activity-submit.focus #goog-gt-tt .translate-form .activity-form input.activity-submit:active{border-color:#3079ed;background-color:#357ae8;background-image:linear-gradient(top,#4d90fe,#357ae8)}#goog-gt-tt .gray{color:#999;font-family:arial,sans-serif}#goog-gt-tt .alt-helper-text{color:#999;font-size:11px;font-family:arial,sans-serif;margin:15px 0 5px}#goog-gt-tt .alt-error-text{color:#800;display:none;font-size:9pt}#goog-gt-tt .alt-menu.goog-menu{background:#fff;border:1px solid #ddd;box-shadow:0 2px 4px #99a;min-width:0;outline:none;padding:0;position:absolute;z-index:2000}#goog-gt-tt .alt-menu .goog-menuitem{cursor:pointer;padding:2px 5px 5px;margin-right:0;border-style:none}#goog-gt-tt .alt-menu .goog-menuitem h1{font-size:100%;font-weight:700;margin:4px 0}#goog-gt-tt .alt-menu .goog-menuitem strong{color:#345aad}#goog-gt-tt .alt-menu div.goog-menuitem:hover{background:#ddd}#goog-gt-tt .goog-submenu-arrow{text-align:right;position:absolute;right:0;left:auto}#goog-gt-tt .goog-menuitem-rtl .goog-submenu-arrow{text-align:left;position:absolute;left:0;right:auto}#goog-gt-tt .gt-hl-text{background-color:#f1ea00;border-radius:4px;box-shadow:rgba(0,0,0,.5)3px 3px 4px;box-sizing:border-box;color:#f1ea00;cursor:pointer;margin:-2px -2px -2px -3px;padding:2px 2px 2px 3px;position:relative}#goog-gt-tt .trans-target-highlight{background-color:#f1ea00;border-radius:4px;box-shadow:rgba(0,0,0,.5)3px 3px 4px;box-sizing:border-box;color:#f1ea00;cursor:pointer;margin:-2px -2px -2px -3px;padding:2px 2px 2px 3px;position:relative;color:#222}#goog-gt-tt .gt-hl-layer{color:#fff;position:absolute!important}#goog-gt-tt .trans-target{background-color:#c9d7f1;border-radius:4px 4px 0 0;box-shadow:rgba(0,0,0,.5)3px 3px 4px;box-sizing:border-box;cursor:pointer;margin:-2px -2px -2px -3px;padding:2px 2px 3px 3px;position:relative}#goog-gt-tt .trans-target .trans-target-highlight{background-color:#c9d7f1;border-radius:4px 4px 0 0;box-shadow:rgba(0,0,0,.5)3px 3px 4px;box-sizing:border-box;cursor:pointer;margin:-2px -2px -2px -3px;padding:2px 2px 3px 3px;position:relative}#goog-gt-tt .trans-edit{background-color:transparent;border:1px solid #4d90fe;border-radius:0;margin:-2px;padding:1px}#goog-gt-tt .gt-trans-highlight-l{border-left:2px solid red;margin-left:-2px}#goog-gt-tt .gt-trans-highlight-r{border-right:2px solid red;margin-right:-2px}#goog-gt-tt #alt-input{padding:2px}#goog-gt-tt #alt-input-text{font-size:11px;padding:2px 2px 3px;margin:0;background-color:#fff;color:#333;border:1px solid #d9d9d9;border-top:1px solid silver;display:inline-block;vertical-align:top;height:21px;box-sizing:border-box}#goog-gt-tt #alt-input-text:hover{border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}#goog-gt-tt #alt-input-text:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none;border:1px solid #4d90fe}#goog-gt-tt #alt-input-submit{font-size:11px;padding:2px 6px 3px;margin:0 0 0 2px;height:21px}div#goog-gt-tt{padding:10px 14px}.gt-hl-layer{clear:both;font-size:10pt;position:relative;text-align:justify;width:100%}.goog-text-highlight{background-color:#c9d7f1;box-shadow:2px 2px 4px #9999aa;box-sizing:border-box;position:relative} \ No newline at end of file diff --git a/static/imgs/flags/en-US.png b/static/imgs/flags/en-US.png new file mode 100644 index 0000000..fc24fa5 Binary files /dev/null and b/static/imgs/flags/en-US.png differ diff --git a/static/imgs/flags/fr-FR.png b/static/imgs/flags/fr-FR.png new file mode 100644 index 0000000..23b7c0b Binary files /dev/null and b/static/imgs/flags/fr-FR.png differ diff --git a/static/imgs/flags/zh-CN.png b/static/imgs/flags/zh-CN.png new file mode 100644 index 0000000..dbf9c60 Binary files /dev/null and b/static/imgs/flags/zh-CN.png differ