self-hosted/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-12-18 08:27:03 +02:00
Code Issues Releases 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 */
html,
body,
select {
:root {
--pri-bg-color: #fff;
--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-family: Arial, Helvetica, sans-serif !important;
}
a {
text-decoration: underline;
body {
background-color: var(--pri-bg-color);
color: var(--fg-color);
}
a.noline{
text-decoration: none;
nav, #nav, #nav-mobile, .locale-panel, .page-footer {
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 {
@ -39,7 +94,7 @@ h3.header {
position: relative;
}
.top-nav .locale-panel{
.top-nav .locale-panel {
position: absolute;
top: 64px;
height: 68px;
@ -66,7 +121,6 @@ h3.header {
display: block;
}
.locale-panel select{
display: block;
height: 32px;
@ -121,6 +175,10 @@ h3.header {
float: none;
}
select {
color: var(--fg-color);
}
.language-select {
display: inline-flex;
align-items: center;
@ -152,7 +210,7 @@ h3.header {
width: 0.5em;
height: 0.5em;
margin: 0 0 0.25rem -0.75rem;
border: solid black;
border: solid var(--fg-color);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
@ -171,6 +229,10 @@ h3.header {
position: relative;
}
.textarea-container .material-icons {
color: #666;
}
.btn-delete-text {
position: absolute;
right: 1.5rem;
@ -202,8 +264,8 @@ h3.header {
}
.btn-switch-type {
background-color: #fff;
color: #1565C0;
background-color: var(--sec-bg-color);
color: var(--fg-color);
display: flex;
align-items: center;
margin: .5rem;
@ -214,19 +276,22 @@ h3.header {
}
.btn-switch-type:hover {
background-color: #eee !important;
color: #1565C0;
background-color: var(--sec-bg-color);
}
.btn-switch-type.active {
background-color: #1565C0 !important;
color: #fff;
background-color: var(--accent-color);
color: #FFF;
}
.btn-switch-type.active .material-icons {
color: #FFF;
}
.file-dropzone {
font-size: 1.1rem;
border: 1px solid #ccc;
background: #f3f3f3;
background: var(--sec-bg-color);
border: 1px solid var(--border-color);
padding: 1rem 2rem 1rem 1.5rem;
min-height: 220px;
position: relative;
@ -253,8 +318,9 @@ h3.header {
.btn-blue {
color: #1565C0;
}
.btn-action:disabled {
color: #666;
color: #666;
}
.btn-action span {
@ -296,8 +362,8 @@ h3.header {
.textarea-container textarea {
font-size: 1.25rem;
resize: none;
border: 1px solid #ccc;
background: #f3f3f3;
background: var(--sec-bg-color);
border: 1px solid var(--border-color);
padding: 1rem 2rem 1rem 1.5rem;
overflow-y: hidden;
}
@ -316,8 +382,8 @@ h3.header {
.code {
font-size: 90%;
padding: 1rem 1.5rem;
border: 1px solid #ccc;
background: #fbfbfb;
background: var(--code-bg-color);
border: 1px solid var(--border-color);
overflow: auto;
font-family: monospace;
min-height: 280px;
@ -325,6 +391,11 @@ h3.header {
overflow: auto;
}
code[class*="language-"], pre[class*="language-"] {
color: var(--fg-color);
text-shadow: 0 1px var(--pri-bg-color);
}
.page-footer .footer-copyright {
justify-content: center;
padding: 0.5rem 1rem;
@ -348,12 +419,6 @@ h3.header {
color: white;
}
@media (min-width: 993px) {
nav button.sidenav-trigger {
display: none;
}
}
#download-btn-wrapper {
display: flex;
justify-content: center;
@ -384,3 +449,9 @@ h3.header {
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="keywords" content="{{ _h('translation') }},{{ _h('api') }}">
{% endif %}
<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/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/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/dark-theme.css') }}" as="style"/>
<meta property="og:title" content="LibreTranslate - {{ _h('Free and Open Source Machine Translation API') }}" />
<meta property="og:type" content="website" />
<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/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/dark-theme.css') }}" />
</head>
<body class="white">
<body>
<header>
<nav class="blue darken-3" role="navigation">
<nav role="navigation">
<div class="nav-wrapper container">
<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">
<span>LibreTranslate</span>
</a>
@ -73,7 +71,7 @@
{% endif %}
<li class="change-language"><a class="noline" href="javascript:void(0)" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
</li>
<li class="locale-panel blue darken-3">
<li class="locale-panel">
<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 %}
</select>
@ -82,7 +80,7 @@
{% endset %}
{{ menulinks }}
</ul>
<ul id="nav-mobile" class="sidenav blue darken-3">
<ul id="nav-mobile" class="sidenav">
{{ menulinks }}
</ul>
<script>
@ -90,13 +88,13 @@
{% for al in alternate_locales %}"{{ al.lang }}": "{{ al.link }}"{% if not loop.last %},{% endif %}
{% endfor %}
};
function changeLocale(slt){
var lang = slt.value;
if (localeLinks[lang]) location.href = localeLinks[lang];
else location.href = '?lang=' + slt.value;
}
var btnChangeLangs = document.getElementsByClassName("change-language");
var localePanels = document.getElementsByClassName("locale-panel");
@ -327,7 +325,7 @@
</div>
</main>
<footer class="page-footer blue darken-3">
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l12 s12">