rafaelcaricio/LibreTranslate
1
0
Fork 0
forked from mirrors/LibreTranslate
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve color contrast for WCAG standards + add underline to links

Browse source
This commit is contained in:
idotj 2022-01-17 20:09:20 +01:00
parent 27d076a1b4
commit 7afce9ae2a
2 changed files with 35 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/static/css/main.css
View file

@ -7,6 +7,10 @@ select {
font-family: Arial, Helvetica, sans-serif !important; font-family: Arial, Helvetica, sans-serif !important;
} }
a {
text-decoration: underline;
}
#app { #app {
min-height: 80vh; min-height: 80vh;
} }
@ -97,7 +101,7 @@ h3.header {
background: none; background: none;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
color: #777; color: #666;
} }
.btn-delete-text:focus, .btn-delete-text:focus,
@ -109,7 +113,7 @@ h3.header {
position: absolute; position: absolute;
right: 2rem; right: 2rem;
bottom: 1rem; bottom: 1rem;
color: #777; color: #666;
pointer-events: none; pointer-events: none;
} }
.actions { .actions {
@ -121,7 +125,7 @@ h3.header {
.btn-switch-type { .btn-switch-type {
background-color: #fff; background-color: #fff;
color: #42A5F5; color: #1565C0;
display: flex; display: flex;
align-items: center; align-items: center;
margin: .5rem; margin: .5rem;
@ -133,11 +137,11 @@ h3.header {
.btn-switch-type:hover { .btn-switch-type:hover {
background-color: #eee !important; background-color: #eee !important;
color: #42A5F5; color: #1565C0;
} }
.btn-switch-type.active { .btn-switch-type.active {
background-color: #42A5F5 !important; background-color: #1565C0 !important;
color: #fff; color: #fff;
} }
@ -161,7 +165,7 @@ h3.header {
.btn-action { .btn-action {
display: flex; display: flex;
align-items: center; align-items: center;
color: #777; color: #666;
font-size: 0.85rem; font-size: 0.85rem;
background: none; background: none;
border: none; border: none;
@ -169,10 +173,10 @@ h3.header {
} }
.btn-blue { .btn-blue {
color: #42A5F5; color: #1565C0;
} }
.btn-action:disabled { .btn-action:disabled {
color: #777; color: #666;
} }
.btn-action span { .btn-action span {
@ -256,6 +260,22 @@ h3.header {
height: 32px; height: 32px;
} }
.brand-logo {
text-decoration: none;
}
.sidenav-trigger {
background-color: transparent;
border: none;
color: white;
}
@media (min-width: 993px) {
nav button.sidenav-trigger {
display: none;
}
}
#download-btn-wrapper { #download-btn-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;

14
app/templates/index.html
View file

@ -35,9 +35,9 @@
<body> <body>
<header> <header>
<nav class="blue lighten-1" role="navigation"> <nav class="blue darken-3" role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a> <button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button>
<a id="logo-container" href="/" class="brand-logo"> <a id="logo-container" href="/" class="brand-logo">
<img src="{{ url_for('static', filename='icon.svg') }}" alt="Logo for LibreTranslate" class="logo"> <img src="{{ url_for('static', filename='icon.svg') }}" alt="Logo for LibreTranslate" class="logo">
<span>LibreTranslate</span> <span>LibreTranslate</span>
@ -251,7 +251,7 @@
<h3 class="header">Open Source Machine Translation API</h3> <h3 class="header">Open Source Machine Translation API</h3>
<h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4> <h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4>
<div id="download-btn-wrapper"> <div id="download-btn-wrapper">
<a id="download-btn" class="waves-effect waves-light btn btn-large" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer"> <a id="download-btn" class="waves-effect waves-light btn btn-large teal darken-2" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
<span class="btn-text">Download</span> <span class="btn-text">Download</span>
</a> </a>
@ -270,19 +270,19 @@
<div class="col l12 s12"> <div class="col l12 s12">
<h5 class="white-text">LibreTranslate</h5> <h5 class="white-text">LibreTranslate</h5>
<p class="grey-text text-lighten-4">Free and Open Source Machine Translation API</p> <p class="grey-text text-lighten-4">Free and Open Source Machine Translation API</p>
<p><a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noopener noreferrer">License: AGPLv3</a></p> <p>License: <a class="grey-text text-lighten-4" href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noopener noreferrer">AGPLv3</a></p>
<p><a class="grey-text text-lighten-4" href="/javascript-licenses" rel="jslicense">JavaScript license information</a></p> <p><a class="grey-text text-lighten-4" href="/javascript-licenses" rel="jslicense">JavaScript license information</a></p>
{% if web_version %} {% if web_version %}
<p> <p>
This public API should be used for testing, personal or infrequent use. If you're going to run an application in production, please <a href="https://github.com/LibreTranslate/LibreTranslate" class="grey-text text-lighten-4" style="text-decoration: underline;" rel="noopener noreferrer">host your own server</a> or <a class="grey-text text-lighten-4" href="https://github.com/LibreTranslate/LibreTranslate#mirrors" style="text-decoration: underline;" rel="noopener noreferrer">get an API key</a>. This public API should be used for testing, personal or infrequent use. If you're going to run an application in production, please <a href="https://github.com/LibreTranslate/LibreTranslate" class="grey-text text-lighten-4" rel="noopener noreferrer">host your own server</a> or <a class="grey-text text-lighten-4" href="https://github.com/LibreTranslate/LibreTranslate#mirrors" rel="noopener noreferrer">get an API key</a>.
</p> </p>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
<div class="footer-copyright center"> <div class="footer-copyright center">
<p> <p class="white-text">
Made with ❤ by <a class="grey-text text-lighten-3" href="https://github.com/LibreTranslate/LibreTranslate/graphs/contributors" rel="noopener noreferrer">LibreTranslate Contributors</a> and powered by <a class="grey-text text-lighten-3" href="https://github.com/argosopentech/argos-translate/" rel="noopener noreferrer">Argos Translate</a> Made with ❤ by <a class="white-text" href="https://github.com/LibreTranslate/LibreTranslate/graphs/contributors" rel="noopener noreferrer">LibreTranslate Contributors</a> and powered by <a class="white-text text-lighten-3" href="https://github.com/argosopentech/argos-translate/" rel="noopener noreferrer">Argos Translate</a>
</p> </p>
</div> </div>
</footer> </footer>