mirror of
https://github.com/LibreTranslate/LibreTranslate.git
synced 2024-11-21 23:41:01 +00:00
chore: clean up theming
This commit is contained in:
Seth Falco
parent
e2841ddc19
commit
88021880cd
3 changed files with 110 additions and 163 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue