mirrors/LibreTranslate
1
1
Fork 1
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-11-21 23:41:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #454 from SethFalco/theming

Browse source 
chore: clean up theming
This commit is contained in:
Piero Toffanin 2023-07-05 14:04:06 +02:00 committed by GitHub
commit abc77002e2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 110 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
libretranslate/static/css/dark-theme.css
View file

@ -1,122 +0,0 @@
@media (prefers-color-scheme: dark) {
.white {
background-color: #111 !important;
color: #fff;
}
.blue.darken-3 {
background-color: #1E5DA6 !important;
}
/* like in btn-delete-text */
.btn-flat {
color: #666;
}
.btn-switch-type {
background-color: #333;
color: #5CA8FF;
}
.btn-switch-type:hover {
background-color: #444 !important;
color: #5CA8FF;
}
.btn-switch-type.active {
background-color: #3392FF !important;
color: #fff;
}
.btn-switch-type.active:hover {
background-color: #5CA8FF !important;
color: #fff;
}
.btn-switch-language {
color: #fff;
}
.language-select:after {
border: solid #fff;
border-width: 0 2px 2px 0;
}
/* like in textarea */
.card-content {
border: 1px solid #444 !important;
background-color: #222 !important;
color: #fff;
}
.file-dropzone {
background: #222;
border: 1px solid #444;
margin-top: 1rem;
}
select, select#locales{
color: #fff;
background: #111;
}
option {
color: #fff;
background: #222;
}
textarea {
border: 1px solid #444 !important;
background-color: #222 !important;
color: #fff;
}
/* like in file dropzone */
.textarea-container {
margin-top: 1rem;
}
.code {
border: 1px solid #444;
background: #222;
color: #fff;
}
code[class*="language-"], pre[class*="language-"] {
color: #fff;
text-shadow: 0 1px #000;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #40b5e8;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #eecfab;
background: hsla(0,0%,15%,.5);
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #acd25f;
}
.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #ff8bcc;
}
.token.class-name, .token.function {
color: #ff7994;
}
}

129
libretranslate/static/css/main.css
View file

@ -1,18 +1,73 @@
/* Custom styles for LibreTranslate page */ /* Custom styles for LibreTranslate page */
html, :root {
body, --pri-bg-color: #fff;
select { --sec-bg-color: #f3f3f3;
--code-bg-color: #fbfbfb;
--border-color: #ccc;
--fg-color: #000;
--nav-fg-color: #fff;
--accent-color: #1565c0;
}
@media (prefers-color-scheme: dark) {
:root {
--pri-bg-color: #111;
--sec-bg-color: #222;
--code-bg-color: #222;
--border-color: #444;
--fg-color: #fff;
}
.token.atrule, .token.attr-value, .token.keyword {
color: #40b5e8;
}
.language-css .token.string, .style .token.string,
.token.entity, .token.operator, .token.url {
color: #eecfab;
background: hsla(0,0%, 15%, .5);
}
.token.attr-name, .token.builtin, .token.char,
.token.inserted, .token.selector, .token.string {
color: #acd25f;
}
.token.boolean, .token.constant, .token.deleted, .token.number,
.token.property, .token.symbol, .token.tag {
color: #ff8bcc;
}
.token.class-name, .token.function {
color: #ff7994;
}
}
html, body, select {
font-size: 16px; font-size: 16px;
font-family: Arial, Helvetica, sans-serif !important; font-family: Arial, Helvetica, sans-serif !important;
} }
a { body {
text-decoration: underline; background-color: var(--pri-bg-color);
color: var(--fg-color);
} }
a.noline{ nav, #nav, #nav-mobile, .locale-panel, .page-footer {
text-decoration: none; background-color: var(--accent-color);
}
nav, nav .material-icons {
color: var(--nav-fg-color);
}
.material-icons {
color: var(--fg-color);
}
a:not(.noline) {
text-decoration: underline;
} }
#app { #app {
@ -39,7 +94,7 @@ h3.header {
position: relative; position: relative;
} }
.top-nav .locale-panel{ .top-nav .locale-panel {
position: absolute; position: absolute;
top: 64px; top: 64px;
height: 68px; height: 68px;
@ -66,7 +121,6 @@ h3.header {
display: block; display: block;
} }
.locale-panel select{ .locale-panel select{
display: block; display: block;
height: 32px; height: 32px;
@ -121,6 +175,10 @@ h3.header {
float: none; float: none;
} }
select {
color: var(--fg-color);
}
.language-select { .language-select {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -152,7 +210,7 @@ h3.header {
width: 0.5em; width: 0.5em;
height: 0.5em; height: 0.5em;
margin: 0 0 0.25rem -0.75rem; margin: 0 0 0.25rem -0.75rem;
border: solid black; border: solid var(--fg-color);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
@ -171,6 +229,10 @@ h3.header {
position: relative; position: relative;
} }
.textarea-container .material-icons {
color: #666;
}
.btn-delete-text { .btn-delete-text {
position: absolute; position: absolute;
right: 1.5rem; right: 1.5rem;
@ -202,8 +264,8 @@ h3.header {
} }
.btn-switch-type { .btn-switch-type {
background-color: #fff; background-color: var(--sec-bg-color);
color: #1565C0; color: var(--fg-color);
display: flex; display: flex;
align-items: center; align-items: center;
margin: .5rem; margin: .5rem;
@ -214,19 +276,22 @@ h3.header {
} }
.btn-switch-type:hover { .btn-switch-type:hover {
background-color: #eee !important; background-color: var(--sec-bg-color);
color: #1565C0;
} }
.btn-switch-type.active { .btn-switch-type.active {
background-color: #1565C0 !important; background-color: var(--accent-color);
color: #fff; color: #FFF;
}
.btn-switch-type.active .material-icons {
color: #FFF;
} }
.file-dropzone { .file-dropzone {
font-size: 1.1rem; font-size: 1.1rem;
border: 1px solid #ccc; background: var(--sec-bg-color);
background: #f3f3f3; border: 1px solid var(--border-color);
padding: 1rem 2rem 1rem 1.5rem; padding: 1rem 2rem 1rem 1.5rem;
min-height: 220px; min-height: 220px;
position: relative; position: relative;
@ -253,8 +318,9 @@ h3.header {
.btn-blue { .btn-blue {
color: #1565C0; color: #1565C0;
} }
.btn-action:disabled { .btn-action:disabled {
color: #666; color: #666;
} }
.btn-action span { .btn-action span {
@ -296,8 +362,8 @@ h3.header {
.textarea-container textarea { .textarea-container textarea {
font-size: 1.25rem; font-size: 1.25rem;
resize: none; resize: none;
border: 1px solid #ccc; background: var(--sec-bg-color);
background: #f3f3f3; border: 1px solid var(--border-color);
padding: 1rem 2rem 1rem 1.5rem; padding: 1rem 2rem 1rem 1.5rem;
overflow-y: hidden; overflow-y: hidden;
} }
@ -316,8 +382,8 @@ h3.header {
.code { .code {
font-size: 90%; font-size: 90%;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border: 1px solid #ccc; background: var(--code-bg-color);
background: #fbfbfb; border: 1px solid var(--border-color);
overflow: auto; overflow: auto;
font-family: monospace; font-family: monospace;
min-height: 280px; min-height: 280px;
@ -325,6 +391,11 @@ h3.header {
overflow: auto; overflow: auto;
} }
code[class*="language-"], pre[class*="language-"] {
color: var(--fg-color);
text-shadow: 0 1px var(--pri-bg-color);
}
.page-footer .footer-copyright { .page-footer .footer-copyright {
justify-content: center; justify-content: center;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
@ -348,12 +419,6 @@ h3.header {
color: white; 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;
@ -384,3 +449,9 @@ h3.header {
display: none; display: none;
} }
} }
@media (min-width: 993px) {
nav button.sidenav-trigger {
display: none;
}
}

22
libretranslate/templates/index.html
View file

@ -11,7 +11,7 @@
<meta name="description" content="{{ _h('Free and Open Source Machine Translation API. Self-hosted, offline capable and easy to setup. Run your own API server in just a few minutes.') }}"> <meta name="description" content="{{ _h('Free and Open Source Machine Translation API. Self-hosted, offline capable and easy to setup. Run your own API server in just a few minutes.') }}">
<meta name="keywords" content="{{ _h('translation') }},{{ _h('api') }}"> <meta name="keywords" content="{{ _h('translation') }},{{ _h('api') }}">
{% endif %} {% endif %}
<link rel="preload" href="{{ url_for('static', filename='icon.svg') }}" as="image" /> <link rel="preload" href="{{ url_for('static', filename='icon.svg') }}" as="image" />
<link rel="preload" href="{{ url_for('static', filename='js/vue@2.js') }}" as="script"> <link rel="preload" href="{{ url_for('static', filename='js/vue@2.js') }}" as="script">
<link rel="preload" href="{{ url_for('static', filename='js/materialize.min.js') }}" as="script"> <link rel="preload" href="{{ url_for('static', filename='js/materialize.min.js') }}" as="script">
@ -22,8 +22,7 @@
<link rel="preload" href="{{ url_for('static', filename='css/material-icons.css') }}" as="style"/> <link rel="preload" href="{{ url_for('static', filename='css/material-icons.css') }}" as="style"/>
<link rel="preload" href="{{ url_for('static', filename='css/prism.min.css') }}" as="style"/> <link rel="preload" href="{{ url_for('static', filename='css/prism.min.css') }}" as="style"/>
<link rel="preload" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" as="style"/> <link rel="preload" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" as="style"/>
<link rel="preload" href="{{ url_for('static', filename='css/dark-theme.css') }}" as="style"/>
<meta property="og:title" content="LibreTranslate - {{ _h('Free and Open Source Machine Translation API') }}" /> <meta property="og:title" content="LibreTranslate - {{ _h('Free and Open Source Machine Translation API') }}" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://libretranslate.com" /> <meta property="og:url" content="https://libretranslate.com" />
@ -49,15 +48,14 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/material-icons.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/material-icons.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/prism.min.css') }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/prism.min.css') }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" /> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}?v={{ version }}" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/dark-theme.css') }}" />
</head> </head>
<body class="white"> <body>
<header> <header>
<nav class="blue darken-3" role="navigation"> <nav role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<button data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></button> <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 noline">
<img src="{{ url_for('static', filename='icon.svg') }}" alt="" class="logo"> <img src="{{ url_for('static', filename='icon.svg') }}" alt="" class="logo">
<span>LibreTranslate</span> <span>LibreTranslate</span>
</a> </a>
@ -73,7 +71,7 @@
{% endif %} {% endif %}
<li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a> <li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
</li> </li>
<li class="locale-panel blue darken-3"> <li class="locale-panel">
<select id="locales" onchange="changeLocale(this)"> <select id="locales" onchange="changeLocale(this)">
{% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'] }}</option>{% endfor %} {% for l in available_locales %}<option value="{{ l['code'] }}" {{ 'selected' if current_locale == l['code'] else ''}}>{{ l['name'] }}</option>{% endfor %}
</select> </select>
@ -82,7 +80,7 @@
{% endset %} {% endset %}
{{ menulinks }} {{ menulinks }}
</ul> </ul>
<ul id="nav-mobile" class="sidenav blue darken-3"> <ul id="nav-mobile" class="sidenav">
{{ menulinks }} {{ menulinks }}
</ul> </ul>
<script> <script>
@ -90,13 +88,13 @@
{% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %} {% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %}
{% endfor %} {% endfor %}
}; };
function changeLocale(slt){ function changeLocale(slt){
var lang = slt.value; var lang = slt.value;
if (localeLinks[lang]) location.href = localeLinks[lang]; if (localeLinks[lang]) location.href = localeLinks[lang];
else location.href = '?lang=' + slt.value; else location.href = '?lang=' + slt.value;
} }
var btnChangeLangs = document.getElementsByClassName("change-language"); var btnChangeLangs = document.getElementsByClassName("change-language");
var localePanels = document.getElementsByClassName("locale-panel"); var localePanels = document.getElementsByClassName("locale-panel");
@ -327,7 +325,7 @@
</div> </div>
</main> </main>
<footer class="page-footer blue darken-3"> <footer class="page-footer">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col l12 s12"> <div class="col l12 s12">