Improve color contrast for WCAG standards + add underline to links

7afce9ae · idotj · 27d076a1 · 7afce9ae · 7afce9ae
Commit 7afce9ae authored 3 years ago by idotj
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -7,6 +7,10 @@ select {
  font-family: Arial, Helvetica, sans-serif !important;
 }

+a {
+  text-decoration: underline; 
+}
+
 #app {
  min-height: 80vh;
 }
@@ -97,7 +101,7 @@ h3.header {
  background: none;
  padding: 0;
  cursor: pointer;
-  color: #777;
+  color: #666;
 }

 .btn-delete-text:focus,
@@ -109,7 +113,7 @@ h3.header {
  position: absolute;
  right: 2rem;
  bottom: 1rem;
-  color: #777;
+  color: #666;
  pointer-events: none;
 }
 .actions {
@@ -121,7 +125,7 @@ h3.header {

 .btn-switch-type {
  background-color: #fff;
-  color: #42A5F5;
+  color: #1565C0;
  display: flex;
  align-items: center;
  margin: .5rem;
@@ -133,11 +137,11 @@ h3.header {

 .btn-switch-type:hover {
    background-color: #eee !important;
-    color: #42A5F5;
+    color: #1565C0;
 }

 .btn-switch-type.active {
-    background-color: #42A5F5 !important;
+    background-color: #1565C0 !important;
    color: #fff;
 }

@@ -161,7 +165,7 @@ h3.header {
 .btn-action {
  display: flex;
  align-items: center;
-  color: #777;
+  color: #666;
  font-size: 0.85rem;
  background: none;
  border: none;
@@ -169,10 +173,10 @@ h3.header {
 }

 .btn-blue {
-  color: #42A5F5;
+  color: #1565C0;
 }
 .btn-action:disabled {
-    color: #777;
+    color: #666;
 }

 .btn-action span {
@@ -256,6 +260,22 @@ h3.header {
  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 {
  display: flex;
  justify-content: center;

--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -35,9 +35,9 @@

 <body>
 	<header>
-		<nav class="blue lighten-1" role="navigation">
+		<nav class="blue darken-3" role="navigation">
 			<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">
 					<img src="{{ url_for('static', filename='icon.svg') }}" alt="Logo for LibreTranslate" class="logo">
          <span>LibreTranslate</span>
@@ -251,7 +251,7 @@
 						<h3 class="header">Open Source Machine Translation API</h3>
 						<h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4>
            <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>
                <span class="btn-text">Download</span>
              </a>
@@ -270,19 +270,19 @@
 				<div class="col l12 s12">
 					<h5 class="white-text">LibreTranslate</h5>
 					<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>
 					{% if web_version %}
 					<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>
 					{% endif %}
 				</div>
 			</div>
 		</div>
 		<div class="footer-copyright center">
-			<p>
-				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>
+			<p class="white-text">
+				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>
 		</div>
 	</footer>