зеркало из https://github.com/mozilla/pontoon.git
Add light theme CSS file (#2997)
Also included: * Consistency changes on the dark theme * De-hardcode Progress Chart colors in Translate view * De-hardcode Time Chart colors * Fix profile image anchor size (image-only rather than the whole block) * Darker inactive toggle buttons Note: after deployment, a small change is required to the homepage contents stored in the database, because a Mozilla logo in the footer has been moved from HTML to CSS. I've already done it on stage to where this patch is currently deployed.
This commit is contained in:
Matjaž Horvat
GitHub
Родитель
ee337e7f5c
Коммит
b97cbb7fc2
|
|
@ -27,7 +27,7 @@ h1 aside {
|
|||
}
|
||||
|
||||
h1 a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -95,12 +95,12 @@ textarea {
|
|||
|
||||
.half input {
|
||||
margin-right: 5px;
|
||||
width: 482px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.half input:last-child {
|
||||
margin-right: 0;
|
||||
width: 483px;
|
||||
width: 481px;
|
||||
}
|
||||
|
||||
.half .for-name .errorlist {
|
||||
|
|
@ -116,26 +116,18 @@ textarea {
|
|||
}
|
||||
|
||||
form .button {
|
||||
background: 88;
|
||||
border: none;
|
||||
display: block;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
height: 31px;
|
||||
width: 31px;
|
||||
}
|
||||
|
||||
.button.delete-inline {
|
||||
color: var(--dark-grey-3);
|
||||
font-size: 20px;
|
||||
form .controls .button.delete-inline {
|
||||
font-size: 18px;
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#admin-strings-form .controls .button,
|
||||
#admin-form .controls .button {
|
||||
border-radius: 3px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
.controls .button,
|
||||
.controls .button {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
|
|
@ -144,27 +136,18 @@ form .button {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
#admin-strings-form .strings-list .entity textarea:nth-child(3) {
|
||||
#admin-strings-form .strings-list .entity textarea {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.controls .button.sync,
|
||||
.controls .button.sync:hover {
|
||||
background: var(--dark-grey-1);
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.controls .button.pretranslate,
|
||||
.controls .button.pretranslate:hover {
|
||||
background: var(--dark-grey-1);
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
}
|
||||
|
||||
form a:link,
|
||||
form a:visited {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -188,7 +171,6 @@ form a:visited {
|
|||
}
|
||||
|
||||
.double-list-selector .locale.select .menu {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
margin: 2px 0 -4px -1px;
|
||||
padding: 10px 0;
|
||||
width: 295px;
|
||||
|
|
@ -349,7 +331,7 @@ form .locales-pretranslate .locale.select.selected {
|
|||
}
|
||||
|
||||
.repository .details-wrapper input {
|
||||
width: 908px;
|
||||
width: 916px;
|
||||
}
|
||||
|
||||
.repository.git .details-wrapper input {
|
||||
|
|
@ -384,11 +366,11 @@ form .locales-pretranslate .locale.select.selected {
|
|||
|
||||
.inline input[id*='url'] {
|
||||
float: left;
|
||||
width: 607px;
|
||||
width: 603px;
|
||||
}
|
||||
|
||||
.branch-wrapper input[type='text'] {
|
||||
width: 134px;
|
||||
width: 142px;
|
||||
}
|
||||
|
||||
.edit section .bottom {
|
||||
|
|
@ -417,7 +399,7 @@ label[for='id_configuration_file'] a {
|
|||
|
||||
.externalresource .arrow::after {
|
||||
content: '▾';
|
||||
color: var(--black-2);
|
||||
color: var(var(--light-grey-7));
|
||||
float: left;
|
||||
margin: 6px 0 0 -20px;
|
||||
pointer-events: none;
|
||||
|
|
@ -462,7 +444,7 @@ textarea.strings-source {
|
|||
}
|
||||
|
||||
.errorlist {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; /* Strange, but needed to keep controls in line when error occures */
|
||||
|
|
@ -558,6 +540,6 @@ textarea.strings-source {
|
|||
}
|
||||
|
||||
.tag.inline select[name^='tag_set-'][name$='-priority'] {
|
||||
width: 276px;
|
||||
width: 272px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ $(function () {
|
|||
.replace(/__prefix__/g, count[type]);
|
||||
|
||||
$('.' + type + ':last').before(
|
||||
'<div class="' + type + ' inline clearfix">' + form + '</div>',
|
||||
'<div class="' + type + ' inline controls clearfix">' + form + '</div>',
|
||||
);
|
||||
count[type]++;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{{ formset.management_form }}
|
||||
{% for form in formset %}
|
||||
{{ form.id }}
|
||||
<div class="{{ type }} inline clearfix">
|
||||
<div class="{{ type }} inline controls clearfix">
|
||||
{{ form.name.label_tag(label_suffix='') }}
|
||||
{{ form.url.label_tag(label_suffix='') }}
|
||||
<span class="arrow">{{ form.name }}</span>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="{{ type }} inline clearfix" data-count="{{ formset.total_form_count() }}">
|
||||
<div class="{{ type }} inline controls clearfix" data-count="{{ formset.total_form_count() }}">
|
||||
{{ formset.empty_form.name.label_tag(label_suffix='') }}
|
||||
{{ formset.empty_form.url.label_tag(label_suffix='') }}
|
||||
<span class="arrow">{{ formset.empty_form.name }}</span>
|
||||
|
|
|
|||
|
|
@ -213,11 +213,11 @@
|
|||
</h3>
|
||||
|
||||
<div class="clearfix">
|
||||
<input id="id_configuration_file" name="configuration_file" type="text" placeholder="l10n.toml" value="{{ form.configuration_file.value() or '' }}">
|
||||
<label for="id_configuration_file">
|
||||
{{ form.configuration_file.help_text|trim }}
|
||||
<a href="https://moz-l10n-config.readthedocs.io/en/latest/fileformat.html" target="_blank">Learn more.</a>
|
||||
</label>
|
||||
<input id="id_configuration_file" name="configuration_file" type="text" placeholder="l10n.toml" value="{{ form.configuration_file.value() or '' }}">
|
||||
{{ form.configuration_file.errors }}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<section class="strings-list">
|
||||
{{ entities_form.management_form }}
|
||||
{% for form in entities_form %}
|
||||
<div class="entity inline clearfix">
|
||||
<div class="entity inline controls clearfix">
|
||||
{{ form.id }}
|
||||
{% for field in ['string', 'comment'] %}
|
||||
{{ form[field].label_tag(label_suffix='') }}
|
||||
|
|
@ -51,10 +51,10 @@
|
|||
|
||||
{% else %}
|
||||
|
||||
<p>
|
||||
<label for="new_strings">
|
||||
There are currently no strings for {{ project }}. You can add new strings using the following form.
|
||||
Enter one new string per line.
|
||||
</p>
|
||||
</label>
|
||||
<textarea name="new_strings" class="strings-source" placeholder="Enter new strings"></textarea>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{{ formset.management_form }}
|
||||
{% for form in formset %}
|
||||
{{ form.id }}
|
||||
<div class="{{ type }} inline clearfix">
|
||||
<div class="{{ type }} inline controls clearfix">
|
||||
{{ form.name.label_tag(label_suffix='') }}
|
||||
{{ form.slug.label_tag(label_suffix='') }}
|
||||
{{ form.priority.label_tag(label_suffix='') }}
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="{{ type }} inline clearfix" data-count="{{ formset.total_form_count() }}">
|
||||
<div class="{{ type }} inline controls clearfix" data-count="{{ formset.total_form_count() }}">
|
||||
{{ formset.empty_form.name.label_tag(label_suffix='') }}
|
||||
{{ formset.empty_form.slug.label_tag(label_suffix='') }}
|
||||
{{ formset.empty_form.priority.label_tag(label_suffix='') }}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,94 @@
|
|||
/* Dark Theme Variables */
|
||||
.dark-theme,
|
||||
.system-theme {
|
||||
--black-1: #1c1e21;
|
||||
--black-2: #000000;
|
||||
--black-3: #272a2f;
|
||||
--black-4: #000000cc;
|
||||
--black-5: #000000bb;
|
||||
--black-6: #000000dd;
|
||||
--black-brown: #2d2323;
|
||||
--blue-1: #3e7089;
|
||||
--blue-2: #5f7285;
|
||||
--brown-1: #676054;
|
||||
--brown-2: #3b3b3b;
|
||||
--coral: #fe8f8f;
|
||||
--dark-brown: #232323;
|
||||
--dark-green: #3b3d3b;
|
||||
--dark-grey-1: #333941;
|
||||
--dark-grey-2: #3f4752;
|
||||
--dark-grey-3: #333333;
|
||||
--dark-grey-4: #444444;
|
||||
--forest-green-1: #41554c;
|
||||
--forest-green-2: #4b6259;
|
||||
--green: #4f7256;
|
||||
--green-2: #64906d;
|
||||
--grey-1: #637283;
|
||||
--grey-2: #525a65;
|
||||
--grey-3: #4d5967;
|
||||
--grey-4: #5c6172;
|
||||
--grey-5: #385465;
|
||||
--grey-6: #777777;
|
||||
--grey-7: #333941e6;
|
||||
--grey-8: #ffffff33;
|
||||
--light-blue: #4fc4f6;
|
||||
--light-green-1: #7bc876;
|
||||
--light-green-2: #7bc176;
|
||||
--light-green-3: #9cd699;
|
||||
--dark-green: #7bc87633;
|
||||
--light-grey-1: #5e6475;
|
||||
--light-grey-2: #888888;
|
||||
--light-grey-3: #666666;
|
||||
--light-grey-4: #bbbbbb;
|
||||
--light-grey-5: #7c8b9c;
|
||||
--light-grey-6: #cccccc;
|
||||
--light-grey-7: #aaaaaa;
|
||||
--light-grey-8: #c0c0c0;
|
||||
--magenta: #843650;
|
||||
--mustard-yellow: #fed271;
|
||||
--neon-green: #c0ff00;
|
||||
--orange-1: #ffa10f;
|
||||
--orange-2: #ff7b00;
|
||||
--pink: #ff3366cc;
|
||||
--light-pink: #ffbed1;
|
||||
--purple-pink: #674b54;
|
||||
--hot-pink: #ff5f9e;
|
||||
--red: #ff0a43;
|
||||
--red-pink: #ff3366;
|
||||
--dark-pink: #b3005e;
|
||||
--lilac: #c6c1f0;
|
||||
--taupe-1: #898989;
|
||||
--taupe-2: #999999;
|
||||
--white-1: #ffffff;
|
||||
--white-2: #f4f4f4;
|
||||
--white-3: #ebebeb;
|
||||
--white-4: #dddddd;
|
||||
--white-5: #e2e2e2;
|
||||
/* Insights_tab.css Variables */
|
||||
/* Main */
|
||||
--main-border-1: #4d5967;
|
||||
--moz-logo: url(../img/moz-logo-light.svg);
|
||||
|
||||
/* Primary (darker) background */
|
||||
--background-1: #272a2f;
|
||||
--background-hover-1: #333941;
|
||||
--button-background-1: #333941;
|
||||
--popup-background-1: #333941;
|
||||
--input-background-1: #333941;
|
||||
--input-color-1: #aaaaaa;
|
||||
--toggle-color-1: #777777;
|
||||
--icon-background-1: #3f4752;
|
||||
--icon-border-1: #4d5967;
|
||||
|
||||
/* Secondary (lighter) background */
|
||||
--background-hover-2: #3f4752;
|
||||
--button-background-2: #3f4752;
|
||||
--button-background-hover-2: #272a2f;
|
||||
--popup-background-2: #272a2f;
|
||||
--icon-background-2: #4d5967;
|
||||
|
||||
/* Homepage */
|
||||
--homepage-background-image: url(../img/background.svg);
|
||||
--homepage-tour-button-background: #ffffff;
|
||||
--homepage-tour-button-color: #000000;
|
||||
|
||||
/* Tooltip */
|
||||
--tooltip-background: #000000dd;
|
||||
--tooltip-color: #ffffff;
|
||||
--tooltip-color-2: #888888;
|
||||
--tooltip-border: #4d5967;
|
||||
|
||||
/* Translation status */
|
||||
--status-translated: #7bc876;
|
||||
--status-translated-alt: #7bc876;
|
||||
--status-pretranslated: #c0ff00;
|
||||
--status-pretranslated-alt: #c0ff00;
|
||||
--status-warning: #ffa10f;
|
||||
--status-error: #ff3366;
|
||||
--status-missing: #5f7285;
|
||||
--status-missing-alt: #5f7285;
|
||||
--status-unreviewed: #4fc4f6;
|
||||
--status-fuzzy: #fed271;
|
||||
|
||||
/* Translation workspace */
|
||||
--translation-background: #3f4752;
|
||||
--translation-border: #5e6475;
|
||||
--translation-color: #ffffff;
|
||||
--translation-secondary-color: #aaaaaa;
|
||||
--translation-main-button-color: #272a2f;
|
||||
--translation-subtitle-color: #888888;
|
||||
--editor-background: #ffffff;
|
||||
--editor-color: #444444;
|
||||
--editor-form-background: #272a2f;
|
||||
--editor-menu-background: #272a2f;
|
||||
--editor-menu-color: #aaaaaa;
|
||||
--editor-menu-action-button-color: #ffffff;
|
||||
--time-range-handles: #272a2f;
|
||||
|
||||
/* Highlights */
|
||||
--diff-del-background: #674b54;
|
||||
--diff-del-color: #fe8f8f;
|
||||
--diff-ins-background: #4b6259;
|
||||
--diff-ins-color: #9cd699;
|
||||
--search-color: #ffa10f;
|
||||
--search-background: #676054;
|
||||
|
||||
/* Chart colors */
|
||||
--green-blue: #4fc4f666;
|
||||
--grey-9: #5f7285;
|
||||
--dark-purple: #f148fb33;
|
||||
--pink-3: #ffacfc;
|
||||
--dark-purple-2: #ffacfc33;
|
||||
--dark-magenta: #b3005e66;
|
||||
--dark-green: #3b3d3b;
|
||||
--forest-green-1: #41554c;
|
||||
--green: #4f7256;
|
||||
--green-2: #64906d;
|
||||
--dark-green: #7bc87633;
|
||||
--magenta: #843650;
|
||||
--blue-1: #3e7089;
|
||||
--light-pink: #ffbed1;
|
||||
--hot-pink: #ff5f9e;
|
||||
--dark-pink: #b3005e;
|
||||
--lilac: #c6c1f0;
|
||||
--grey-5: #385465;
|
||||
|
||||
/* Insights Pretranslation Quality Chart */
|
||||
--brown-grey: #9c9290;
|
||||
--brown-grey-2: #c5bfbe;
|
||||
|
|
@ -82,4 +100,15 @@
|
|||
--dark-pink: #b173a0;
|
||||
--purple: #8074a8;
|
||||
--green-brown: #7c7270;
|
||||
|
||||
--black-3: #272a2f;
|
||||
--grey-3: #4d5967;
|
||||
--white-1: #ffffff;
|
||||
|
||||
--dark-grey-1: #333941;
|
||||
--dark-grey-2: #3f4752;
|
||||
--light-grey-1: #5e6475;
|
||||
--light-grey-2: #888888;
|
||||
--light-grey-6: #cccccc;
|
||||
--light-grey-7: #aaaaaa;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
.download-selector .selector .fa {
|
||||
float: right;
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--button-background-2);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: var(--light-grey-7);
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
.download-selector .selector .fa:hover {
|
||||
background: var(--black-3);
|
||||
background: var(--button-background-hover-2);
|
||||
}
|
||||
|
||||
.download-selector.opened .selector .fa {
|
||||
background: var(--black-3);
|
||||
background: var(--button-background-hover-2);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading h1 .small {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-weight: 300;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .details .value a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
#heading .details .priority .value {
|
||||
|
|
@ -127,7 +127,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .legend li:hover a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
#heading .legend li .status.fa {
|
||||
|
|
@ -145,7 +145,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .legend li:hover a span.value {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
#heading .non-plottable {
|
||||
|
|
@ -165,7 +165,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .non-plottable a:hover p {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
#heading .non-plottable p.value {
|
||||
|
|
@ -183,10 +183,10 @@ ul {
|
|||
}
|
||||
|
||||
#heading .non-plottable .unreviewed .status.fa:before {
|
||||
color: var(--grey-3);
|
||||
color: var(--icon-background-2);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#heading .non-plottable .unreviewed.pending .status.fa:before {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,93 @@
|
|||
/* Light Theme Variables Placeholder */
|
||||
/* Light Theme Variables */
|
||||
.light-theme {
|
||||
--black-1: #1c1e21;
|
||||
--black-2: #000000;
|
||||
--black-3: #272a2f;
|
||||
--black-4: #000000cc;
|
||||
--black-5: #000000bb;
|
||||
--black-6: #000000dd;
|
||||
--black-brown: #2d2323;
|
||||
--blue-1: #3e7089;
|
||||
--blue-2: #5f7285;
|
||||
--brown-1: #676054;
|
||||
--brown-2: #3b3b3b;
|
||||
--coral: #fe8f8f;
|
||||
--dark-brown: #232323;
|
||||
--dark-green: #3b3d3b;
|
||||
--dark-grey-1: #333941;
|
||||
--dark-grey-2: #3f4752;
|
||||
--dark-grey-3: #333333;
|
||||
--dark-grey-4: #444444;
|
||||
--forest-green-1: #41554c;
|
||||
--forest-green-2: #4b6259;
|
||||
--green: #4f7256;
|
||||
--green-2: #64906d;
|
||||
--grey-1: #637283;
|
||||
--grey-2: #525a65;
|
||||
--grey-3: #4d5967;
|
||||
--grey-4: #5c6172;
|
||||
--grey-5: #385465;
|
||||
--grey-6: #777777;
|
||||
--grey-7: #333941e6;
|
||||
--grey-8: #ffffff33;
|
||||
--light-blue: #4fc4f6;
|
||||
--light-green-1: #7bc876;
|
||||
--light-green-2: #7bc176;
|
||||
--light-green-3: #9cd699;
|
||||
--dark-green: #7bc87633;
|
||||
--light-grey-1: #5e6475;
|
||||
--light-grey-2: #888888;
|
||||
--light-grey-3: #666666;
|
||||
--light-grey-4: #bbbbbb;
|
||||
--light-grey-5: #7c8b9c;
|
||||
--light-grey-6: #cccccc;
|
||||
--light-grey-7: #aaaaaa;
|
||||
--light-grey-8: #c0c0c0;
|
||||
--magenta: #843650;
|
||||
--mustard-yellow: #fed271;
|
||||
--neon-green: #c0ff00;
|
||||
--orange-1: #ffa10f;
|
||||
--orange-2: #ff7b00;
|
||||
--pink: #ff3366cc;
|
||||
--light-pink: #ffbed1;
|
||||
--purple-pink: #674b54;
|
||||
--hot-pink: #ff5f9e;
|
||||
--red: #ff0a43;
|
||||
--red-pink: #ff3366;
|
||||
--dark-pink: #b3005e;
|
||||
--lilac: #c6c1f0;
|
||||
--taupe-1: #898989;
|
||||
--taupe-2: #999999;
|
||||
--white-1: #ffffff;
|
||||
--white-2: #f4f4f4;
|
||||
--white-3: #ebebeb;
|
||||
--white-4: #dddddd;
|
||||
--white-5: #e2e2e2;
|
||||
/* Insights_tab.css Variables */
|
||||
/* Main */
|
||||
--main-border-1: #d8d8d8;
|
||||
--moz-logo: url(../img/moz-logo.svg);
|
||||
|
||||
/* Primary (darker) background */
|
||||
--background-1: #f6f6f6;
|
||||
--background-hover-1: #ffffff;
|
||||
--button-background-1: #ffffff;
|
||||
--popup-background-1: #ffffff;
|
||||
--input-background-1: #ffffff;
|
||||
--input-color-1: #000000;
|
||||
--toggle-color-1: #888888;
|
||||
--icon-background-1: #d0d0d0;
|
||||
--icon-border-1: #bbbbbb;
|
||||
|
||||
/* Secondary (lighter) background */
|
||||
--background-hover-2: #ededed;
|
||||
--button-background-2: #e8e8e8;
|
||||
--button-background-hover-2: #f6f6f6;
|
||||
--popup-background-2: #f6f6f6;
|
||||
--icon-background-2: #d0d0d0;
|
||||
|
||||
/* Tooltip */
|
||||
--tooltip-background: #000000dd;
|
||||
--tooltip-color: #ffffff;
|
||||
--tooltip-color-2: #888888;
|
||||
--tooltip-border: #4d5967;
|
||||
|
||||
/* Homepage */
|
||||
--homepage-background-image: url(../img/background-light.svg);
|
||||
--homepage-tour-button-background: #ffffff;
|
||||
--homepage-tour-button-color: #000000;
|
||||
|
||||
/* Translation status */
|
||||
--status-translated: #7bc876;
|
||||
--status-translated-alt: #49a643;
|
||||
--status-pretranslated: #c0ff00;
|
||||
--status-pretranslated-alt: #80a900;
|
||||
--status-warning: #ffa10f;
|
||||
--status-error: #ff3366;
|
||||
--status-missing: #bec7d1;
|
||||
--status-missing-alt: #5f7285;
|
||||
--status-unreviewed: #4fc4f6;
|
||||
--status-fuzzy: #fed271;
|
||||
|
||||
/* Translation workspace */
|
||||
--translation-background: #f6f6f6;
|
||||
--translation-border: #bbbbbb;
|
||||
--translation-color: #000000;
|
||||
--translation-secondary-color: #888888;
|
||||
--translation-main-button-color: #000000;
|
||||
--translation-subtitle-color: #555555;
|
||||
--editor-background: #ffffff;
|
||||
--editor-color: #444444;
|
||||
--editor-form-background: #e8e8e8;
|
||||
--editor-menu-background: #ffffff;
|
||||
--editor-menu-color: #555555;
|
||||
--editor-menu-action-button-color: #000000;
|
||||
--time-range-handles: #888888;
|
||||
|
||||
/* Highlights */
|
||||
--diff-del-background: #ffebe9;
|
||||
--diff-del-color: #fe5c5c;
|
||||
--diff-ins-background: #e5feeb;
|
||||
--diff-ins-color: #42983e;
|
||||
--search-color: #ffa10f;
|
||||
--search-background: #fff4e2;
|
||||
|
||||
/* Chart colors */
|
||||
--green-blue: #4fc4f666;
|
||||
--grey-9: #5f7285;
|
||||
--dark-purple: #f148fb33;
|
||||
--pink-3: #ffacfc;
|
||||
--dark-purple-2: #ffacfc33;
|
||||
--dark-magenta: #b3005e66;
|
||||
--dark-green: #3b3d3b;
|
||||
--forest-green-1: #41554c;
|
||||
--green: #4f7256;
|
||||
--green-2: #64906d;
|
||||
--dark-green: #7bc87633;
|
||||
--magenta: #843650;
|
||||
--blue-1: #3e7089;
|
||||
--light-pink: #ffbed1;
|
||||
--hot-pink: #ff5f9e;
|
||||
--dark-pink: #b3005e;
|
||||
--lilac: #c6c1f0;
|
||||
--grey-5: #385465;
|
||||
|
||||
/* Insights Pretranslation Quality Chart */
|
||||
--brown-grey: #9c9290;
|
||||
--brown-grey-2: #c5bfbe;
|
||||
|
|
@ -81,4 +99,15 @@
|
|||
--dark-pink: #b173a0;
|
||||
--purple: #8074a8;
|
||||
--green-brown: #7c7270;
|
||||
|
||||
--black-3: #f6f6f6;
|
||||
--grey-3: #e8e8e8;
|
||||
--white-1: #444444;
|
||||
|
||||
--dark-grey-1: #ffffff;
|
||||
--dark-grey-2: #e8e8e8;
|
||||
--light-grey-1: #e8e8e8;
|
||||
--light-grey-2: #888888;
|
||||
--light-grey-6: #444444;
|
||||
--light-grey-7: #666666;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.menu.left-column li.selected {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--background-hover-1);
|
||||
}
|
||||
|
||||
.menu.left-column li.selected a {
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.menu.left-column .count {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--button-background-2);
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
|
@ -44,6 +44,10 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.menu.right-column li.hover {
|
||||
background: var(--background-hover-2);
|
||||
}
|
||||
|
||||
.menu.right-column li.no .title {
|
||||
font-size: 22px;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -17,28 +17,28 @@
|
|||
}
|
||||
|
||||
.status.fa:before {
|
||||
color: var(--blue-2);
|
||||
color: var(--status-missing);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.translated .status.fa:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.pretranslated .status.fa:before {
|
||||
color: var(--neon-green);
|
||||
color: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.warnings .status.fa:before {
|
||||
color: var(--orange-1);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.errors .status.fa:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.unreviewed .status.fa:before {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +62,10 @@ body {
|
|||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading {
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
#heading,
|
||||
#middle {
|
||||
background: var(--dark-grey-1);
|
||||
|
|
@ -95,7 +99,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
|
|
@ -120,13 +124,13 @@ a:visited {
|
|||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
sup a:link,
|
||||
sup a:visited {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
|
|
@ -134,9 +138,12 @@ input[type='search'],
|
|||
input[type='password'],
|
||||
input[type='url'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
textarea {
|
||||
background: var(--light-grey-2);
|
||||
border: none;
|
||||
background: var(--input-background-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
color: var(--input-color-1);
|
||||
padding: 4px 3px 3px;
|
||||
width: 205px;
|
||||
float: left;
|
||||
|
|
@ -146,16 +153,16 @@ textarea {
|
|||
float: none;
|
||||
}
|
||||
|
||||
input[type='text']:focus,
|
||||
input[type='search']:focus,
|
||||
input[type='password']:focus,
|
||||
input[type='url']:focus,
|
||||
input[type='number']:focus,
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
background-color: var(--white-1);
|
||||
outline: none; /* Remove WebKit Glow */
|
||||
}
|
||||
|
||||
input:invalid,
|
||||
textarea:invalid {
|
||||
box-shadow: none; /* Override Boilerplate Default */
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
|
@ -172,7 +179,7 @@ tbody {
|
|||
}
|
||||
|
||||
thead tr {
|
||||
border-bottom: 1px solid var(--grey-3);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
@ -217,7 +224,7 @@ table.striped tr:nth-child(even) {
|
|||
}
|
||||
|
||||
tfoot tr {
|
||||
border-top: 1px solid var(--grey-3);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
|
|
@ -231,9 +238,9 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.count {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--button-background-2);
|
||||
border-radius: 3px;
|
||||
color: var(--light-grey-6);
|
||||
color: var(--light-grey-7);
|
||||
margin-left: 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
|
@ -270,7 +277,7 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu {
|
||||
background: var(--black-3);
|
||||
background: var(--popup-background-2);
|
||||
bottom: 50px;
|
||||
color: var(--light-grey-7);
|
||||
display: none;
|
||||
|
|
@ -286,83 +293,6 @@ tfoot td a {
|
|||
z-index: 19; /* Must be lower than for the (popup) .menu */
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs,
|
||||
#go {
|
||||
background: var(--dark-grey-2);
|
||||
font-size: 16px;
|
||||
height: 20px;
|
||||
margin: 10px 10px 10px 0;
|
||||
overflow: hidden;
|
||||
padding: 10px 20px 10px 40px;
|
||||
text-overflow: ellipsis;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#settings .menu {
|
||||
width: 185px;
|
||||
}
|
||||
|
||||
#go {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs:before,
|
||||
#go:before {
|
||||
content: '';
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid var(--black-3);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs:after {
|
||||
content: '';
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid var(--dark-grey-2);
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.locale.select > .button.breadcrumbs {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.locale.select > .button.breadcrumbs:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs:hover {
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs:hover:after {
|
||||
border-left-color: var(--grey-3);
|
||||
}
|
||||
|
||||
.select.opened > .button.breadcrumbs {
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.select.opened > .button.breadcrumbs:after {
|
||||
border-left-color: var(--grey-3);
|
||||
}
|
||||
|
||||
#go {
|
||||
color: var(--white-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
#go.active,
|
||||
#go:hover {
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
.project.select,
|
||||
.locale.select,
|
||||
.part.select,
|
||||
|
|
@ -387,6 +317,7 @@ tfoot td a {
|
|||
.project.select input[type='search'],
|
||||
.locale.select input[type='search'],
|
||||
.part.select input[type='search'] {
|
||||
border: none;
|
||||
width: 100%;
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -458,15 +389,15 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu ul li .chart span.translated {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
}
|
||||
|
||||
.select .menu ul li .chart span.pretranslated {
|
||||
background: var(--neon-green);
|
||||
background: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.select .menu ul li .chart span.missing {
|
||||
background: var(--blue-2);
|
||||
background: var(--status-missing);
|
||||
}
|
||||
|
||||
.select .menu ul li .latest {
|
||||
|
|
@ -484,7 +415,7 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu ul li .latest a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -514,7 +445,11 @@ tfoot td a {
|
|||
|
||||
.menu li.hover {
|
||||
color: var(--white-1);
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--background-hover-1);
|
||||
}
|
||||
|
||||
.menu:not(.permanent) li.hover {
|
||||
background: var(--background-hover-2);
|
||||
}
|
||||
|
||||
.menu li.hover a {
|
||||
|
|
@ -527,7 +462,7 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.menu li.horizontal-separator {
|
||||
border-top: 1px solid var(--grey-2);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
@ -549,7 +484,7 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.search-wrapper {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -564,18 +499,7 @@ tfoot td a {
|
|||
|
||||
.search-wrapper input[type='search'] {
|
||||
background: transparent;
|
||||
color: var(--white-1);
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.search-wrapper input[type='search']::-webkit-search-decoration,
|
||||
.search-wrapper input[type='search']::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu input[type='search'] {
|
||||
background: transparent;
|
||||
color: var(--white-1);
|
||||
border: none;
|
||||
float: none;
|
||||
font-weight: 300;
|
||||
padding-left: 25px;
|
||||
|
|
@ -583,18 +507,19 @@ tfoot td a {
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.menu input[type='search']:focus {
|
||||
background-color: transparent;
|
||||
.search-wrapper input[type='search']::-webkit-search-decoration,
|
||||
.search-wrapper input[type='search']::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.locale .code {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: var(--grey-7);
|
||||
color: var(--light-green-1);
|
||||
background: var(--tooltip-background);
|
||||
color: var(--status-translated);
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
left: 0;
|
||||
|
|
@ -613,12 +538,12 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.notification li.error {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
img.rounded {
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--grey-3);
|
||||
border: 2px solid var(--icon-border-1);
|
||||
}
|
||||
|
||||
#error {
|
||||
|
|
@ -642,7 +567,7 @@ img.rounded {
|
|||
}
|
||||
|
||||
#addon-promotion {
|
||||
background: var(--pink);
|
||||
background: var(--status-error);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
|
|
@ -693,7 +618,7 @@ body.addon-promotion-active #addon-promotion {
|
|||
|
||||
body > header {
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
height: 60px;
|
||||
transition: margin-top 0.3s;
|
||||
}
|
||||
|
|
@ -730,7 +655,7 @@ header nav .right .sign-in-header {
|
|||
|
||||
header nav .right .sign-in-header button {
|
||||
background: transparent;
|
||||
border: 1.5px solid var(--light-green-2);
|
||||
border: 1.5px solid var(--status-translated);
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
|
@ -743,7 +668,7 @@ header nav .right .sign-in-header button {
|
|||
}
|
||||
|
||||
header nav .right .sign-in-header button:hover {
|
||||
background-color: var(--light-green-2);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
||||
header .select .menu {
|
||||
|
|
@ -767,13 +692,13 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#notifications .button .icon {
|
||||
color: var(--grey-3);
|
||||
color: var(--icon-border-1);
|
||||
font-size: 26px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
#notifications .button .badge {
|
||||
background: var(--red-pink);
|
||||
background: var(--status-error);
|
||||
border: 3px solid var(--black-3);
|
||||
border-radius: 12px;
|
||||
color: var(--white-1);
|
||||
|
|
@ -796,7 +721,7 @@ header .right .select .menu {
|
|||
|
||||
#notifications .menu,
|
||||
#profile .menu {
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
|
@ -829,16 +754,16 @@ header .right .select .menu {
|
|||
.menu
|
||||
ul.notification-list
|
||||
li.notification-item[data-unread='true'] {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--background-hover-1);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item span {
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item a {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -857,6 +782,7 @@ header .right .select .menu {
|
|||
|
||||
.notifications .menu li.notification-item .message.trim,
|
||||
.notifications .menu li.notification-item .message.trim > p {
|
||||
color: var(--translation-secondary-color);
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -867,6 +793,8 @@ header .right .select .menu {
|
|||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item.hover .message.trim,
|
||||
.notifications .menu li.notification-item.hover .message.trim > p,
|
||||
.notifications .menu li.notification-item.hover .message.trim a {
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
|
@ -922,7 +850,7 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#notifications .menu li.horizontal-separator {
|
||||
border-color: var(--dark-grey-1);
|
||||
border-color: var(--main-border-1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -990,7 +918,7 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#profile .button .menu-icon {
|
||||
border: 2px solid var(--grey-3);
|
||||
border: 2px solid var(--main-border-1);
|
||||
border-radius: 100%;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
|
|
@ -1053,7 +981,7 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#profile .menu li.appearance button:last-child {
|
||||
border-left: 1px solid var(--light-grey-3);
|
||||
border-left: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
#profile .menu li.appearance button .icon {
|
||||
|
|
@ -1084,11 +1012,12 @@ nav .links li {
|
|||
|
||||
.links li a:hover,
|
||||
.links li a:active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.submenu.tabs {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.submenu .links a:link,
|
||||
|
|
@ -1102,7 +1031,7 @@ nav .links li {
|
|||
.submenu .links li.active a,
|
||||
.submenu .links a:hover,
|
||||
.submenu .links a:active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.submenu.tabs .links {
|
||||
|
|
@ -1120,7 +1049,7 @@ nav .links li {
|
|||
}
|
||||
|
||||
.submenu.tabs .links li.active {
|
||||
border-color: var(--light-grey-1);
|
||||
border-color: var(--main-border-1);
|
||||
background: var(--black-3);
|
||||
}
|
||||
|
||||
|
|
@ -1170,7 +1099,7 @@ noscript p {
|
|||
}
|
||||
|
||||
#error #box a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 108px;
|
||||
}
|
||||
|
||||
|
|
@ -1182,7 +1111,7 @@ noscript p {
|
|||
|
||||
#subtitle,
|
||||
#subtitle a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 32px;
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
|
|
@ -1197,7 +1126,7 @@ noscript p {
|
|||
}
|
||||
|
||||
#action #link {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
body > form,
|
||||
|
|
@ -1219,12 +1148,12 @@ body > form,
|
|||
}
|
||||
|
||||
.check-box .fa:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.check-box.enabled .fa:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -1250,7 +1179,7 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li > header .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
|
@ -1260,7 +1189,7 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section.machinery ul li > header sup {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
#helpers > section.machinery ul li > header .sources {
|
||||
|
|
@ -1336,13 +1265,13 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li > p ins {
|
||||
background: var(--forest-green-2);
|
||||
color: var(--light-green-3);
|
||||
background: var(--diff-ins-background);
|
||||
color: var(--diff-ins-color);
|
||||
}
|
||||
|
||||
#helpers > section ul li > p del {
|
||||
background: var(--purple-pink);
|
||||
color: var(--coral);
|
||||
background: var(--diff-del-background);
|
||||
color: var(--diff-del-color);
|
||||
}
|
||||
|
||||
#helpers > section ul li > p ins mark,
|
||||
|
|
@ -1400,7 +1329,6 @@ body > form,
|
|||
#standalone-sign-in input[type='text'],
|
||||
#standalone-sign-in input[type='password'] {
|
||||
float: none;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
@ -1409,15 +1337,24 @@ body > form,
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
#standalone-sign-in ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#standalone-sign-in ul.errorlist {
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.controls .button {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--button-background-1);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border-radius: 3px;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 400;
|
||||
height: auto;
|
||||
|
|
@ -1441,7 +1378,7 @@ body > form,
|
|||
.controls a.button:hover,
|
||||
.controls li.active a.button,
|
||||
.controls .button.active {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
|
|
@ -1479,24 +1416,24 @@ body > form,
|
|||
|
||||
.controls > .search-wrapper input {
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--main-border-1);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
padding-left: 25px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.priority .fa-star {
|
||||
color: var(--grey-1);
|
||||
color: var(--icon-background-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.priority .value .fa-star {
|
||||
color: var(--icon-background-2);
|
||||
}
|
||||
|
||||
.priority .fa-star.active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.container .info {
|
||||
|
|
@ -1514,7 +1451,7 @@ body > form,
|
|||
}
|
||||
|
||||
.container .info a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
|
|
@ -1522,11 +1459,11 @@ body > form,
|
|||
}
|
||||
|
||||
.toggle-button button {
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--light-grey-3);
|
||||
background: transparent;
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: var(--grey-6);
|
||||
color: var(--toggle-color-1);
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
|
|
@ -1535,7 +1472,6 @@ body > form,
|
|||
}
|
||||
|
||||
.toggle-button button:first-child {
|
||||
border-right-color: var(--grey-3);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
@ -1551,8 +1487,8 @@ body > form,
|
|||
}
|
||||
|
||||
.toggle-button button.active {
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--grey-3);
|
||||
background: var(--button-background-1);
|
||||
border-color: var(--main-border-1);
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--background-hover-1);
|
||||
}
|
||||
|
||||
.table th:first-child {
|
||||
|
|
@ -122,17 +122,17 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
/* Selector must also match heading-info */
|
||||
.deadline time.approaching {
|
||||
color: var(--orange-1);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
/* Selector must also match heading-info */
|
||||
.deadline time.overdue {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.table td.code div {
|
||||
|
|
@ -143,7 +143,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table td.code a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
line-height: 47px;
|
||||
padding: 15px 5px 14px;
|
||||
}
|
||||
|
|
@ -176,10 +176,10 @@ table.table.project-list.hidden {
|
|||
|
||||
.table .latest-activity .tooltip {
|
||||
display: block;
|
||||
background: var(--black-1);
|
||||
background: var(--tooltip-background);
|
||||
border-radius: 10px;
|
||||
bottom: 30px;
|
||||
color: var(--white-1);
|
||||
color: var(--tooltip-color);
|
||||
left: -100px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
|
|
@ -192,7 +192,7 @@ table.table.project-list.hidden {
|
|||
content: '';
|
||||
position: absolute;
|
||||
border: 10px solid;
|
||||
border-color: var(--black-1) transparent transparent transparent;
|
||||
border-color: var(--tooltip-background) transparent transparent transparent;
|
||||
bottom: -20px;
|
||||
left: 160px; /* Must be (tooltip width + tooltip padding + bottom) / 2 */
|
||||
clip: rect(0 20px 10px 0);
|
||||
|
|
@ -201,7 +201,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity .tooltip .quote {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +212,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity .tooltip footer {
|
||||
color: var(--light-grey-2);
|
||||
color: var(--tooltip-color-2);
|
||||
font-style: italic;
|
||||
height: 48px;
|
||||
margin-top: 10px;
|
||||
|
|
@ -239,10 +239,11 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity .tooltip footer .translation-action a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.table .latest-activity .tooltip footer img {
|
||||
border-color: var(--tooltip-border);
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
|
@ -272,7 +273,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .chart-wrapper .unreviewed-status {
|
||||
color: var(--dark-grey-2);
|
||||
color: var(--icon-background-1);
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -280,27 +281,27 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .chart-wrapper .unreviewed-status.pending {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .translated {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .pretranslated {
|
||||
background: var(--neon-green);
|
||||
background: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .warnings {
|
||||
background: var(--orange-1);
|
||||
background: var(--status-warning);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .errors {
|
||||
background: var(--red-pink);
|
||||
background: var(--status-error);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .missing {
|
||||
background: var(--blue-2);
|
||||
background: var(--status-missing);
|
||||
}
|
||||
|
||||
.table tr:hover .progress .chart-wrapper {
|
||||
|
|
@ -346,27 +347,27 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .legend li.translated .title {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.table .progress .legend li.pretranslated .title {
|
||||
color: var(--neon-green);
|
||||
color: var(--status-pretranslated-alt);
|
||||
}
|
||||
|
||||
.table .progress .legend li.warnings .title {
|
||||
color: var(--orange-1);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.table .progress .legend li.errors .title {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.table .progress .legend li.missing .title {
|
||||
color: var(--light-grey-5);
|
||||
color: var(--status-missing-alt);
|
||||
}
|
||||
|
||||
.table .progress .legend li.unreviewed .title {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.table .progress .legend li.all .title {
|
||||
|
|
@ -379,10 +380,10 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .legend li a:hover .title {
|
||||
color: var(--white-3);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.table .progress .legend li a:hover .value {
|
||||
color: var(--white-3);
|
||||
color: var(--white-1);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
#main a:link,
|
||||
#main a:visited {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
#main p,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
{% endblock extend_js %}
|
||||
</head>
|
||||
|
||||
<body class="{% block class %}{% endblock %}">
|
||||
<body class="{% block class %}{% endblock %} dark-theme">
|
||||
<header>
|
||||
<ul class="notification">
|
||||
{% for message in messages %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
a.avatar {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#heading .banner .title {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
#heading .legend {
|
||||
|
|
@ -91,11 +91,11 @@ th:last-child sup {
|
|||
}
|
||||
|
||||
.stats .details div.approved {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.stats .details div.unreviewed {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.stats .details div p {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
#main .container .left-column hr {
|
||||
border-color: var(--grey-3);
|
||||
border-color: var(--main-border-1);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
|
|
@ -41,7 +41,7 @@ h2 {
|
|||
}
|
||||
|
||||
.username {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
line-height: 1.4em;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
|
|
@ -78,11 +78,11 @@ h2 {
|
|||
}
|
||||
|
||||
.item-with-icon a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.item-with-icon .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.personal-information .button {
|
||||
|
|
@ -103,11 +103,11 @@ h4 {
|
|||
}
|
||||
|
||||
h4.superuser {
|
||||
border: 1px solid var(--red-pink);
|
||||
border: 1px solid var(--status-error);
|
||||
border-radius: 16px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
/* Approval Ratio */
|
||||
|
|
@ -164,7 +164,7 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#insights .chart-group-navigation ul li.active .icon {
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
||||
#insights .chart-group-navigation ul li.active .label {
|
||||
|
|
@ -176,7 +176,7 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#insights h3 .tooltip li.twelve-month-average::marker {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
|
|
@ -207,11 +207,11 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#stats > div.translated span {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
#stats > div.unreviewed span {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
#stats > div p {
|
||||
|
|
@ -275,7 +275,7 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#contributions .type-selector .menu li span {
|
||||
color: var(--light-grey-6);
|
||||
color: var(--light-grey-7);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -286,7 +286,7 @@ h4.superuser {
|
|||
|
||||
#contributions h3,
|
||||
#timeline h3 {
|
||||
color: var(--light-grey-6);
|
||||
color: var(--white-1);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -307,8 +307,8 @@ svg.js-calendar-graph-svg {
|
|||
.svg-tip {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background: var(--black-4);
|
||||
color: var(--light-grey-4);
|
||||
background: var(--tooltip-background);
|
||||
color: var(--tooltip-color-2);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
|
|
@ -326,7 +326,7 @@ svg.js-calendar-graph-svg {
|
|||
margin: 0 0 0 -5px;
|
||||
content: ' ';
|
||||
border: 5px solid transparent;
|
||||
border-top-color: var(--black-4);
|
||||
border-top-color: var(--tooltip-background);
|
||||
}
|
||||
|
||||
/* Contribution Timeline */
|
||||
|
|
@ -417,7 +417,7 @@ svg.js-calendar-graph-svg {
|
|||
}
|
||||
|
||||
#timeline .localizations li a .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
#timeline .localizations li a .contribution-count {
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
#locale-settings .locale-selector .locale.select .menu {
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--popup-background-1);
|
||||
top: 30px;
|
||||
width: 295px;
|
||||
z-index: 30;
|
||||
|
|
@ -103,10 +103,6 @@
|
|||
|
||||
#main .field input,
|
||||
#main .field textarea {
|
||||
color: var(--light-grey-7);
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
float: none;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -150,7 +146,7 @@
|
|||
}
|
||||
|
||||
#main .field .verify {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -185,7 +181,7 @@
|
|||
}
|
||||
|
||||
.errorlist {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
font-style: italic;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,14 +68,17 @@ var Pontoon = (function (my) {
|
|||
type: 'line',
|
||||
label: '12-month average',
|
||||
data: data2,
|
||||
borderColor: [style.getPropertyValue('--light-green-1')],
|
||||
borderColor: [style.getPropertyValue('--status-translated')],
|
||||
borderWidth: 1,
|
||||
pointBackgroundColor: style.getPropertyValue('--light-green-1'),
|
||||
pointBackgroundColor: style.getPropertyValue(
|
||||
'--status-translated',
|
||||
),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-green-1'),
|
||||
pointHoverBackgroundColor: style.getPropertyValue(
|
||||
'--status-translated',
|
||||
),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
order: 1,
|
||||
},
|
||||
|
|
@ -88,7 +91,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: style.getPropertyValue('--light-green-1'),
|
||||
borderColor: style.getPropertyValue('--status-translated'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -200,7 +203,7 @@ var Pontoon = (function (my) {
|
|||
color = style.getPropertyValue('--green-2');
|
||||
break;
|
||||
default:
|
||||
color = style.getPropertyValue('--light-green-1');
|
||||
color = style.getPropertyValue('--status-translated');
|
||||
}
|
||||
|
||||
const y = currentDate.getDay() * step;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ body > header {
|
|||
}
|
||||
|
||||
body > header.menu-opened {
|
||||
border-color: var(--dark-grey-1);
|
||||
border-color: var(--main-border-1);
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -24,7 +24,6 @@ body > header.menu-opened {
|
|||
}
|
||||
|
||||
#main p {
|
||||
color: var(--white-4);
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -36,15 +35,12 @@ body > header.menu-opened {
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
background-image: url(../img/background.svg);
|
||||
background-color: var(--background-1);
|
||||
background-image: var(--homepage-background-image);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.section {
|
||||
color: var(--white-2);
|
||||
}
|
||||
|
||||
.section .container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -72,8 +68,8 @@ h2 {
|
|||
}
|
||||
|
||||
#main .button {
|
||||
background-color: var(--white-1);
|
||||
color: var(--black-2);
|
||||
background-color: var(--homepage-tour-button-background);
|
||||
color: var(--homepage-tour-button-color);
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
width: 240px;
|
||||
|
|
@ -85,7 +81,7 @@ h2 {
|
|||
}
|
||||
|
||||
#main .button.primary {
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -143,7 +139,7 @@ nav#sections ul li:hover a.active span {
|
|||
width: 12px;
|
||||
margin: -6px 0 0 -6px;
|
||||
border-radius: 100%;
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
||||
nav#sections ul li a span {
|
||||
|
|
@ -186,8 +182,8 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#edit-homepage .button {
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-2);
|
||||
background: var(--status-translated);
|
||||
color: var(--homepage-tour-button-color);
|
||||
}
|
||||
|
||||
#edit-homepage .fa {
|
||||
|
|
@ -238,8 +234,8 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
|
||||
#section-1 .scroll::after {
|
||||
content: '';
|
||||
border-right: 2px solid var(--light-green-1);
|
||||
border-bottom: 2px solid var(--light-green-1);
|
||||
border-right: 2px solid var(--status-translated);
|
||||
border-bottom: 2px solid var(--status-translated);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
|
|
@ -271,7 +267,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
margin-top: 40px;
|
||||
width: 2px;
|
||||
height: 290px;
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
||||
#section-3 ol {
|
||||
|
|
@ -285,14 +281,13 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-3 li {
|
||||
color: var(--white-4);
|
||||
counter-increment: item;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#section-3 li:before {
|
||||
background-color: var(--black-3);
|
||||
border: 2px solid var(--light-green-1);
|
||||
background-color: var(--background-1);
|
||||
border: 2px solid var(--status-translated);
|
||||
border-radius: 100%;
|
||||
color: var(--white-1);
|
||||
content: counter(item);
|
||||
|
|
@ -307,7 +302,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-3 .checkmark {
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
border-radius: 100%;
|
||||
width: 54px;
|
||||
height: 39px;
|
||||
|
|
@ -324,7 +319,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-4 .box {
|
||||
border: 2px solid var(--grey-3);
|
||||
border: 2px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
margin-left: 20px;
|
||||
padding: 10px;
|
||||
|
|
@ -334,7 +329,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-4 .box .box-image {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 35px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -354,7 +349,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-5 img {
|
||||
border: 2px solid var(--grey-3);
|
||||
border: 2px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
width: 436px;
|
||||
}
|
||||
|
|
@ -389,6 +384,8 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-6 .footer .mozilla .logo {
|
||||
background: var(--moz-logo) no-repeat;
|
||||
height: 22px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
|
|
@ -405,5 +402,5 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-6 .footer a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
После Ширина: | Высота: | Размер: 203 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
До Ширина: | Высота: | Размер: 452 KiB После Ширина: | Высота: | Размер: 203 KiB |
|
|
@ -0,0 +1,25 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 2000 571.9" style="enable-background:new 0 0 2000 571.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M746.2,254.1c-36.6,0-59.4,27.2-59.4,74.3c0,43.3,20,76.6,58.8,76.6c37.2,0,61.6-30,61.6-77.7
|
||||
C807.2,276.8,780,254.1,746.2,254.1z"/>
|
||||
<path class="st0" d="M1727.2,380c0,16.1,7.8,28.9,29.4,28.9c25.5,0,52.7-18.3,54.4-59.9c-11.6-1.7-24.4-3.3-36.1-3.3
|
||||
C1749.4,345.6,1727.2,352.8,1727.2,380z"/>
|
||||
<path class="st0" d="M0,0v571.9h2000V0H0z M581.9,454.4H477V313.5c0-43.3-14.4-59.9-42.7-59.9c-34.4,0-48.3,24.4-48.3,59.4V400
|
||||
h33.3v54.4H314.5V313.5c0-43.3-14.4-59.9-42.7-59.9c-34.4,0-48.3,24.4-48.3,59.4V400h47.7v54.4H118.7V400h33.3V258.5h-33.3v-54.4
|
||||
h104.8v37.7c15-26.6,41.1-42.7,76-42.7c36.1,0,69.3,17.2,81.6,53.8c13.9-33.3,42.2-53.8,81.6-53.8c44.9,0,86,27.2,86,86.5V400h33.3
|
||||
V454.4z M743.4,459.9c-77.1,0-130.4-47.1-130.4-127c0-73.2,44.4-133.7,134.3-133.7S881,259.6,881,329.5
|
||||
C881,409.4,823.3,459.9,743.4,459.9z M1146.9,454.4H928.3l-7.2-37.7l137.6-158.1h-78.2l-11.1,38.8l-51.6-5.6l8.9-87.7h219.7
|
||||
l5.6,37.7L1013.2,400h81l11.7-38.8l56.6,5.5L1146.9,454.4z M1289.7,454.4h-74.9v-89.9h74.9V454.4z M1289.7,294h-74.9v-89.9h74.9
|
||||
V294z M1336.5,454.4l108.2-381.7h70.5L1407,454.4H1336.5z M1481.9,454.4L1590,72.7h70.5l-108.2,381.7H1481.9z M1865.9,459.9
|
||||
c-33.3,0-51.6-19.4-54.9-49.9c-14.4,25.5-39.9,49.9-80.4,49.9c-36.1,0-77.1-19.4-77.1-71.6c0-61.6,59.4-76,116.5-76
|
||||
c13.9,0,28.3,0.6,41.1,2.2v-8.3c0-25.5-0.6-56-41.1-56c-15,0-26.6,1.1-38.3,7.2l-8.1,28.2l-57.1-6.1l9.8-57.6
|
||||
c43.8-17.8,66-22.7,107.1-22.7c53.8,0,99.3,27.7,99.3,84.9v108.7c0,14.4,5.6,19.4,17.2,19.4c3.3,0,6.7-0.6,10.5-1.7l0.6,37.7
|
||||
C1897.5,455.5,1881.4,459.9,1865.9,459.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.9 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 2000 571.9" style="enable-background:new 0 0 2000 571.9;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st0{fill:#000000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M746.2,254.1c-36.6,0-59.4,27.2-59.4,74.3c0,43.3,20,76.6,58.8,76.6c37.2,0,61.6-30,61.6-77.7
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 1.9 KiB После Ширина: | Высота: | Размер: 1.9 KiB |
|
|
@ -109,7 +109,7 @@
|
|||
<div class="footer flex">
|
||||
<div class="flex-col-3 mozilla">
|
||||
<a href="https://mozilla.org/">
|
||||
<img class="logo" src="static/img/moz-logo.svg" />
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-col-3 github">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
#insights h3 {
|
||||
color: var(--white-3);
|
||||
color: var(--white-1);
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
/* Tooltip */
|
||||
|
||||
#insights .controls .selector {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--button-background-2);
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
|
|
@ -37,11 +37,12 @@
|
|||
|
||||
#insights h3 .fa.active,
|
||||
#insights h3 .fa:hover {
|
||||
background: var(--black-3);
|
||||
background: var(--button-background-hover-2);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip {
|
||||
background: var(--black-6);
|
||||
background: var(--tooltip-background);
|
||||
color: var(--tooltip-color);
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
#insights .controls .period-selector li .selector.active,
|
||||
#insights .controls .period-selector li .selector:hover {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
|
|
@ -84,13 +84,13 @@
|
|||
/* Active users info tooltip */
|
||||
|
||||
#insights h3 .tooltip li::marker {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
/* Time to review suggestions and Age of unreviewed info tooltip */
|
||||
|
||||
#insights h3 .tooltip li.current-month::marker {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.twelve-month-average::marker {
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
}
|
||||
|
||||
#insights h3 .tooltip li.completion::marker {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
/* Review activity info tooltip */
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
|
||||
#insights h3 .tooltip li.unreviewed::marker {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
/* Pretranslation quality info tooltip */
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ var Pontoon = (function (my) {
|
|||
plot(
|
||||
activeStart,
|
||||
activeEnd,
|
||||
style.getPropertyValue('--light-green-1'),
|
||||
style.getPropertyValue('--status-translated'),
|
||||
);
|
||||
|
||||
var inactiveLength = 2;
|
||||
|
|
@ -89,14 +89,17 @@ var Pontoon = (function (my) {
|
|||
label: 'Age of unreviewed suggestions',
|
||||
data: chart.data('lifespans'),
|
||||
backgroundColor: gradient,
|
||||
borderColor: [style.getPropertyValue('--light-blue')],
|
||||
borderColor: [style.getPropertyValue('--status-unreviewed')],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: style.getPropertyValue('--light-blue'),
|
||||
pointBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-blue'),
|
||||
pointHoverBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
},
|
||||
],
|
||||
|
|
@ -106,7 +109,7 @@ var Pontoon = (function (my) {
|
|||
display: false,
|
||||
},
|
||||
tooltips: {
|
||||
borderColor: style.getPropertyValue('--light-blue'),
|
||||
borderColor: style.getPropertyValue('--status-unreviewed'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -190,14 +193,17 @@ var Pontoon = (function (my) {
|
|||
type: 'line',
|
||||
label: '12-month average',
|
||||
data: chart.data('time-to-review-suggestions-12-month-avg'),
|
||||
borderColor: [style.getPropertyValue('--light-blue')],
|
||||
borderColor: [style.getPropertyValue('--status-unreviewed')],
|
||||
borderWidth: 1,
|
||||
pointBackgroundColor: style.getPropertyValue('--light-blue'),
|
||||
pointBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-blue'),
|
||||
pointHoverBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
order: 1,
|
||||
spanGaps: true,
|
||||
|
|
@ -211,7 +217,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: style.getPropertyValue('--light-blue'),
|
||||
borderColor: style.getPropertyValue('--status-unreviewed'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -392,14 +398,17 @@ var Pontoon = (function (my) {
|
|||
data: chart.data('completion'),
|
||||
yAxisID: 'completion-y-axis',
|
||||
backgroundColor: gradient,
|
||||
borderColor: [style.getPropertyValue('--light-green-1')],
|
||||
borderColor: [style.getPropertyValue('--status-translated')],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: style.getPropertyValue('--light-green-1'),
|
||||
pointBackgroundColor: style.getPropertyValue(
|
||||
'--status-translated',
|
||||
),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-green-1'),
|
||||
pointHoverBackgroundColor: style.getPropertyValue(
|
||||
'--status-translated',
|
||||
),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
},
|
||||
humanData.length > 0 && {
|
||||
|
|
@ -444,7 +453,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: style.getPropertyValue('--light-green-1'),
|
||||
borderColor: style.getPropertyValue('--status-translated'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -565,7 +574,7 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient.addColorStop(0, style.getPropertyValue('--light-blue'));
|
||||
gradient.addColorStop(0, style.getPropertyValue('--status-unreviewed'));
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
var unreviewedData = chart.data('unreviewed') || [];
|
||||
|
|
@ -585,14 +594,17 @@ var Pontoon = (function (my) {
|
|||
data: unreviewedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: gradient,
|
||||
borderColor: [style.getPropertyValue('--light-blue')],
|
||||
borderColor: [style.getPropertyValue('--status-unreviewed')],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: style.getPropertyValue('--light-blue'),
|
||||
pointBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-blue'),
|
||||
pointHoverBackgroundColor: style.getPropertyValue(
|
||||
'--status-unreviewed',
|
||||
),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
},
|
||||
peerApprovedData.length > 0 && {
|
||||
|
|
@ -646,7 +658,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: style.getPropertyValue('--light-blue'),
|
||||
borderColor: style.getPropertyValue('--status-unreviewed'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.clipboard-success {
|
||||
float: left;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
#helpers .machinery li {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.manual-notifications #compose h3 .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.manual-notifications #compose .toolbar {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.manual-notifications #compose .errors p {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
text-transform: uppercase;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.sync-log .start-time a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
/** @details */
|
||||
|
|
@ -56,6 +56,8 @@ td {
|
|||
|
||||
.command-details {
|
||||
background: var(--dark-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.command-details .detail-item {
|
||||
|
|
@ -64,34 +66,34 @@ td {
|
|||
}
|
||||
|
||||
.command-details .start-time {
|
||||
border-color: var(--light-green-1);
|
||||
border-color: var(--status-translated);
|
||||
}
|
||||
|
||||
.command-details .end-time {
|
||||
border-color: var(--light-blue);
|
||||
border-color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.command-details .duration {
|
||||
border-color: var(--mustard-yellow);
|
||||
border-color: var(--status-warning);
|
||||
}
|
||||
|
||||
.project-details .start-time .detail-label,
|
||||
.repository-details .start-time .detail-label {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.project-details .end-time .detail-label,
|
||||
.repository-details .end-time .detail-label {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.project-details .duration .detail-label,
|
||||
.repository-details .duration .detail-label {
|
||||
color: var(--mustard-yellow);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.project {
|
||||
border: 1px solid var(--grey-4);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
}
|
||||
|
||||
#info-wrapper .read-write-info textarea {
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
background: var(--input-background-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
color: var(--white-1);
|
||||
font-weight: 300;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
#info-wrapper .controls .cancel {
|
||||
display: none;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
margin: 9px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ form .locale.select.selected {
|
|||
|
||||
form .locale.select .menu {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
margin: 2px 0 -4px -1px;
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
|
|
@ -66,7 +66,7 @@ label {
|
|||
|
||||
form a:link,
|
||||
form a:visited {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@
|
|||
}
|
||||
|
||||
#request-item-note p a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.request-item {
|
||||
display: none;
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.request-item.confirmed {
|
||||
background: var(--mustard-yellow);
|
||||
background: var(--status-warning);
|
||||
}
|
||||
|
||||
#team-form {
|
||||
|
|
@ -115,8 +115,8 @@
|
|||
|
||||
#team-form .field input {
|
||||
color: var(--white-1);
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
background: var(--input-background-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
float: none;
|
||||
width: 480px;
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
|
||||
.item-list td.check,
|
||||
.item-list td.radio {
|
||||
color: var(--dark-grey-2);
|
||||
color: var(--icon-background-1);
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
height: 47px;
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
.item-list td.check:hover:before,
|
||||
.item-list td.check.enabled:before {
|
||||
content: '';
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.item-list td.check.enabled:before {
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
|
||||
.item-list td.radio:hover:before,
|
||||
.item-list td.radio.enabled:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.items.requesting-pretranslation .item-list .deadline,
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.buglist tbody .id a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.buglist th {
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
#permissions-form h3 .remove-project:hover {
|
||||
background: var(--red-pink);
|
||||
background: var(--status-error);
|
||||
}
|
||||
|
||||
#permissions-form h3 .remove-project .fa {
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
|
||||
#permissions-form .user.select .menu {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
}
|
||||
|
||||
#permissions-form #project-selector .menu {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--popup-background-1);
|
||||
bottom: 28px;
|
||||
width: 287px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.locale-selector .locale.select .button.breadcrumbs {
|
||||
background: var(--dark-grey-1);
|
||||
.locale-selector .locale.select .button {
|
||||
background: var(--button-background-1);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.locale-selector .locale.select .menu {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--popup-background-1);
|
||||
top: 28px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
{% macro locale(locales_list, locale_selected) %}
|
||||
<div class="locale-selector">
|
||||
<div class="locale select">
|
||||
<div class="button breadcrumbs selector noselect">
|
||||
<div class="button selector noselect">
|
||||
<span class="language" {{ locale_selected.serialize() | dict_html_attrs }}>{{ locale_selected.name }}</span><span class="code">{{ locale_selected.code }}</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
}
|
||||
|
||||
.tag-resource-widget {
|
||||
background: var(--taupe-2);
|
||||
background: var(--popup-background-1);
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 0.3em;
|
||||
padding: 0.3em 1em;
|
||||
}
|
||||
|
||||
.tag-resources .rt-table input {
|
||||
|
|
|
|||
|
|
@ -6,5 +6,5 @@ ul.errors {
|
|||
}
|
||||
|
||||
ul.errors li.error {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<title>Pontoon</title>
|
||||
|
||||
<!-- Inlining CSS mitigates/prevents fouc. -->
|
||||
<style> body { background: #3f4752 !important; } </style>
|
||||
<style> body { background: var(--translation-background) !important; } </style>
|
||||
<link href="/static/css/fontawesome-all.css" rel="stylesheet" />
|
||||
<link href="/static/css/boilerplate.css" rel="stylesheet" />
|
||||
<link href="/static/css/fonts.css" rel="stylesheet" />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
#app > header {
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
min-width: 700px;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
#app > .main-content > .panel-content {
|
||||
border-left: 1px solid var(--light-grey-1);
|
||||
border-left: 1px solid var(--main-border-1);
|
||||
box-sizing: border-box;
|
||||
width: 75%;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
|
|
@ -57,7 +57,8 @@
|
|||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px var(--light-green-1), 0 0 5px var(--light-green-1);
|
||||
box-shadow: 0 0 10px var(--status-translated),
|
||||
0 0 5px var(--status-translated);
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ button {
|
|||
}
|
||||
|
||||
body {
|
||||
background: var(--black-3);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +33,7 @@ a:visited {
|
|||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.addon-promotion .container {
|
||||
align-items: center;
|
||||
background: var(--pink);
|
||||
background: var(--status-error);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.batch-actions .topbar {
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
padding: 12px 10px 13px;
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.batch-actions .topbar button:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.batch-actions .topbar button.select-all {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.batch-actions .topbar button.selected-count .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.batch-actions .topbar button .fa {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel .intro p .stress {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel button,
|
||||
|
|
@ -86,10 +86,10 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel button {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: var(--black-3);
|
||||
color: var(--translation-main-button-color);
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
padding: 15px 5px;
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel button.reject-all {
|
||||
background: var(--red-pink);
|
||||
background: var(--status-error);
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel input {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
background-color: var(--dark-grey-1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
font-size: 11px;
|
||||
max-height: 144px;
|
||||
margin: auto;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.comments-list .add-comment .comment-editor .mention-element {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.comments-mention-list {
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
.comments-list .add-comment .submit-button:hover:not(:disabled) {
|
||||
color: var(--black-3);
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
}
|
||||
|
||||
.comments-list .add-comment .submit-button:disabled {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.comments-list .comment a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -65,11 +65,11 @@
|
|||
}
|
||||
|
||||
.comments-list .comment .info .pin-button:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.comments-list .comment .comment-pin {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 9px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
}
|
||||
|
||||
.translation p ins {
|
||||
background: var(--forest-green-2);
|
||||
color: var(--light-green-3);
|
||||
background: var(--diff-ins-background);
|
||||
color: var(--diff-ins-color);
|
||||
}
|
||||
|
||||
.translation p del {
|
||||
background: var(--purple-pink);
|
||||
color: var(--coral);
|
||||
background: var(--diff-del-background);
|
||||
color: var(--diff-del-color);
|
||||
}
|
||||
|
||||
.translation p ins mark,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.editor {
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
.editor-menu {
|
||||
background: var(--editor-menu-background);
|
||||
color: var(--white-1);
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.translationform + .editor-menu {
|
||||
background: var(--editor-form-background);
|
||||
}
|
||||
|
||||
.editor-menu .actions {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -11,14 +16,14 @@
|
|||
.editor-menu .actions button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--white-1);
|
||||
color: var(--editor-menu-action-button-color);
|
||||
height: 40px;
|
||||
margin: 0 2px;
|
||||
padding: 10px 3px;
|
||||
}
|
||||
|
||||
.editor-menu .actions button:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.editor-menu .actions button .fa {
|
||||
|
|
@ -28,16 +33,16 @@
|
|||
.editor-menu .actions .action-approve,
|
||||
.editor-menu .actions .action-save,
|
||||
.editor-menu .actions .action-suggest {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
border-radius: 3px;
|
||||
color: var(--black-3);
|
||||
color: var(--translation-main-button-color);
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.editor-menu .actions .action-suggest {
|
||||
background: var(--light-blue);
|
||||
background: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.editor-menu .actions .action-approve:hover,
|
||||
|
|
@ -58,7 +63,7 @@
|
|||
.editor-menu .banner button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-style: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,17 +6,18 @@
|
|||
|
||||
.editor-settings .selector {
|
||||
cursor: pointer;
|
||||
color: var(--light-grey-7);
|
||||
color: var(--editor-menu-color);
|
||||
font-size: 22px;
|
||||
padding: 9px 5px 9px 0;
|
||||
}
|
||||
|
||||
.editor-settings .selector:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.editor-settings .menu {
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--main-border-1);
|
||||
bottom: auto;
|
||||
color: var(--light-grey-7);
|
||||
list-style: none;
|
||||
|
|
@ -48,7 +49,7 @@
|
|||
}
|
||||
|
||||
.editor-settings .menu .horizontal-separator {
|
||||
border-top: 1px solid var(--grey-2);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
@ -59,11 +60,11 @@
|
|||
}
|
||||
|
||||
.editor-settings .menu .check-box .fa:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.editor-settings .menu .check-box.enabled .fa:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
content: '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.failed-checks .title {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.failed-checks .error:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.failed-checks .warning:before {
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
}
|
||||
|
||||
.failed-checks .anyway {
|
||||
background: var(--light-green-1);
|
||||
background: var(--status-translated);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
bottom: 10px;
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
|
||||
.failed-checks .anyway.suggest {
|
||||
background: var(--light-blue);
|
||||
background: var(--status-unreviewed);
|
||||
}
|
||||
|
||||
.failed-checks .anyway:hover {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.editor .ftl {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--light-grey-7);
|
||||
color: var(--editor-menu-color);
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
.editor .ftl.active,
|
||||
.editor .ftl:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.editor .ftl.error {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,18 @@
|
|||
}
|
||||
|
||||
.keyboard-shortcuts .selector {
|
||||
color: var(--editor-menu-color);
|
||||
font-size: 22px;
|
||||
padding: 9px 5px;
|
||||
}
|
||||
|
||||
.keyboard-shortcuts .selector:hover {
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.keyboard-shortcuts .overlay {
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
font-size: 13px;
|
||||
width: 400px;
|
||||
height: 435px;
|
||||
|
|
@ -52,7 +57,7 @@
|
|||
|
||||
.keyboard-shortcuts .overlay span {
|
||||
background: var(--dark-grey-2);
|
||||
border: 1px solid var(--light-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 2px;
|
||||
font-weight: 300;
|
||||
margin: 0 4px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
.tm-source {
|
||||
font-size: 11px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: var(--grey-3);
|
||||
background: var(--translation-background);
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
.tm-source .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
background: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px var(--black-5);
|
||||
box-shadow: 0 0 20px -2px var(--tooltip-background);
|
||||
box-sizing: border-box;
|
||||
margin: -20px auto;
|
||||
padding: 20px;
|
||||
|
|
@ -30,5 +30,5 @@
|
|||
}
|
||||
|
||||
.new-contributor-tooltip p a {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.translation-length {
|
||||
color: var(--light-grey-7);
|
||||
color: var(--editor-menu-color);
|
||||
float: left;
|
||||
line-height: 22px;
|
||||
padding: 9px 5px;
|
||||
}
|
||||
|
||||
.translation-length .countdown .overflow {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.entities {
|
||||
background-color: var(--dark-grey-2);
|
||||
height: calc(100% - 53px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
}
|
||||
|
||||
.entities .no-results div {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
display: block;
|
||||
font-size: 128px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -23,15 +23,16 @@
|
|||
}
|
||||
|
||||
.entity mark.search {
|
||||
color: var(--orange-1);
|
||||
background: var(--search-background);
|
||||
color: var(--search-color);
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
background: var(--brown-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.entity .source-string,
|
||||
.entity .translation-string {
|
||||
color: var(--translation-color);
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding-bottom: 3px;
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
}
|
||||
|
||||
.entity .translation-string {
|
||||
color: var(--light-grey-7);
|
||||
color: var(--translation-secondary-color);
|
||||
min-height: 20px;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -67,7 +68,7 @@
|
|||
}
|
||||
|
||||
.entity .status:before {
|
||||
color: var(--blue-2);
|
||||
color: var(--status-missing);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -80,19 +81,19 @@
|
|||
}
|
||||
|
||||
.entity.approved .status:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.entity.pretranslated .status:before {
|
||||
color: var(--neon-green);
|
||||
color: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.entity.errors .status:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.entity.warnings .status:before {
|
||||
color: var(--orange-1);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.entity.sibling {
|
||||
|
|
@ -110,5 +111,5 @@
|
|||
}
|
||||
|
||||
.entity .sibling-entities-icon:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,5 +12,5 @@
|
|||
}
|
||||
|
||||
.metadata .source-string-comment .context-issue-button:hover {
|
||||
border-color: var(--grey-1);
|
||||
border-color: var(--translation-border);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.entity-details {
|
||||
background: var(--dark-grey-2);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -16,6 +15,6 @@
|
|||
|
||||
.entity-details .third-column {
|
||||
width: 33.33%;
|
||||
border-left: 1px solid var(--light-grey-1);
|
||||
border-left: 1px solid var(--main-border-1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.entity-navigation {
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
padding: 12px 10px 13px;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.entity-navigation button:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.entity-navigation button:disabled {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.third-column .top {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
box-sizing: border-box;
|
||||
height: calc(40% + 21px);
|
||||
min-height: 200px;
|
||||
|
|
@ -26,8 +26,8 @@
|
|||
|
||||
.react-tabs__tab {
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-right: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
border-right: 1px solid var(--main-border-1);
|
||||
box-sizing: border-box;
|
||||
color: var(--light-grey-6);
|
||||
cursor: pointer;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
.react-tabs__tab--selected {
|
||||
background: var(--dark-grey-2);
|
||||
background: inherit;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
/* Other tools styles */
|
||||
.react-tabs span.count {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--translation-background);
|
||||
border-radius: 3px;
|
||||
color: var(--light-grey-6);
|
||||
font-weight: 300;
|
||||
|
|
@ -75,5 +75,5 @@
|
|||
|
||||
.react-tabs span.count .preferred,
|
||||
.react-tabs span.count .pinned {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.metadata {
|
||||
background-color: var(--dark-grey-2);
|
||||
color: var(--light-grey-7);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
color: var(--translation-secondary-color);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
min-height: 114px;
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
}
|
||||
|
||||
.metadata .title {
|
||||
color: var(--light-grey-2);
|
||||
color: var(--translation-subtitle-color);
|
||||
}
|
||||
|
||||
.metadata div a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.metadata .original {
|
||||
color: white;
|
||||
color: var(--translation-color);
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
line-height: 22px;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.metadata .original .term {
|
||||
background: inherit;
|
||||
border-bottom: 1px solid var(--light-green-1);
|
||||
border-bottom: 1px solid var(--status-translated);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
.metadata button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-style: italic;
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
}
|
||||
|
||||
.metadata .context a {
|
||||
color: var(--light-grey-7);
|
||||
color: var(--translation-secondary-color);
|
||||
}
|
||||
|
||||
.metadata .context a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.lightbox {
|
||||
align-items: center;
|
||||
background-color: var(--black-4);
|
||||
background-color: var(--tooltip-background);
|
||||
cursor: zoom-out;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
}
|
||||
|
||||
.history p {
|
||||
color: var(--translation-color);
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.history .wrapper {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
.history .translation {
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
|
||||
.history .translation .user-avatar img {
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--light-grey-1);
|
||||
border: 2px solid var(--icon-border-1);
|
||||
}
|
||||
|
||||
.history .translation:hover .user-avatar img {
|
||||
border-color: var(--grey-1);
|
||||
border-color: var(--translation-border);
|
||||
}
|
||||
|
||||
.history .translation .content {
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header .info a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.history .translation .content > header .toggle {
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header .toggle.on {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.history .translation:hover .content > header .toggle {
|
||||
|
|
@ -91,11 +91,11 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header .toggle:hover {
|
||||
border-color: var(--grey-1);
|
||||
border-color: var(--translation-border);
|
||||
}
|
||||
|
||||
.history .translation .content > header .toggle.active .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.history .translation .content > header button {
|
||||
|
|
@ -136,11 +136,11 @@
|
|||
}
|
||||
|
||||
.history .translation.pretranslated .content > header button.approve:before {
|
||||
color: var(--neon-green);
|
||||
color: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.history .translation.fuzzy .content > header button.approve:before {
|
||||
color: var(--mustard-yellow);
|
||||
color: var(--status-fuzzy);
|
||||
}
|
||||
|
||||
.history .translation .content > header button.approve:before,
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
|
||||
.history .translation.can-approve .content > header button.approve:hover:before,
|
||||
.history .translation .content > header button.unapprove:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.history .translation:not(.can-approve) .content > header button.approve:before,
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
|
||||
.history .translation.can-reject .content > header button.reject:hover:before,
|
||||
.history .translation .content > header button.unreject:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.history .translation:not(.can-reject) .content > header button.reject:before,
|
||||
|
|
@ -204,14 +204,14 @@
|
|||
}
|
||||
|
||||
.translation .content > header button.delete:hover:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.machinery-sources {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#___reactour .interactive-tour {
|
||||
color: var(--black-brown);
|
||||
color: #444444;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
}
|
||||
|
||||
.interactive-tour p a {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.skeleton-loader p {
|
||||
height: 0.8125rem;
|
||||
background-color: var(--white-5);
|
||||
background-color: var(--translation-secondary-color);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
background-color: var(--light-green-1);
|
||||
background-color: var(--status-translated);
|
||||
|
||||
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
|
||||
animation: stretchdelay 1.2s infinite ease-in-out;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.machinery .translation mark.search {
|
||||
color: var(--orange-1);
|
||||
background: var(--search-background);
|
||||
color: var(--search-color);
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
background: var(--brown-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
border: none;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 23px;
|
||||
|
|
@ -69,25 +69,3 @@
|
|||
.machinery > .search-wrapper input[type='search']::-webkit-input-placeholder {
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.machinery .load-more-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 15px 0 20px 0;
|
||||
}
|
||||
|
||||
.machinery .load-more-button {
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--dark-grey-2);
|
||||
border-radius: 4px;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 100;
|
||||
margin-right: 6px;
|
||||
padding: 2px 4px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.machinery .load-more-button:hover {
|
||||
border-color: var(--grey-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.machinery .translation {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
.machinery .translation > header .quality,
|
||||
.machinery .translation > header sup {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.machinery .translation > header .projects {
|
||||
|
|
@ -63,11 +63,12 @@
|
|||
}
|
||||
|
||||
.machinery .translation p {
|
||||
color: var(--translation-color);
|
||||
min-height: 22px;
|
||||
text-align: start;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.machinery .translation p.original {
|
||||
color: var(--light-grey-7);
|
||||
color: var(--translation-secondary-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.navigation > ul > li + li::before {
|
||||
color: var(--grey-3);
|
||||
color: var(--icon-border-1);
|
||||
content: '/';
|
||||
font-size: 28px;
|
||||
font-weight: 100;
|
||||
|
|
@ -17,13 +17,13 @@
|
|||
}
|
||||
|
||||
.navigation > ul > li > a {
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
font-weight: 300;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.navigation > ul > li > a:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.navigation img {
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
}
|
||||
|
||||
.navigation .locale-code {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.notification-panel {
|
||||
background: var(--grey-7);
|
||||
background: var(--tooltip-background);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
|
|
@ -17,11 +17,11 @@
|
|||
|
||||
.notification-panel .info,
|
||||
.notification-panel .success {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.notification-panel .error {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
/* Showing and hiding animations. */
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function NotificationPanel(): React.ReactElement<'div'> {
|
|||
useEffect(() => {
|
||||
window.clearTimeout(timeout.current);
|
||||
if (message) {
|
||||
timeout.current = window.setTimeout(hide, 2000);
|
||||
timeout.current = window.setTimeout(hide, 20000);
|
||||
}
|
||||
}, [message]);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.fluent-rich-string label > :not(:last-child)::after {
|
||||
content: '·';
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.other-locales .translation {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.other-locales ul.preferred-list .translation:last-child {
|
||||
border-bottom-color: var(--light-green-1);
|
||||
border-bottom-color: var(--status-translated);
|
||||
}
|
||||
|
||||
.other-locales .translation.cannot-copy {
|
||||
|
|
@ -15,7 +15,6 @@
|
|||
.other-locales .translation:not(.cannot-copy):hover,
|
||||
.other-locales .translation.selected {
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--light-grey-1);
|
||||
}
|
||||
|
||||
.other-locales .translation > header {
|
||||
|
|
@ -29,11 +28,12 @@
|
|||
}
|
||||
|
||||
.other-locales .translation > header span {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.other-locales .translation > p {
|
||||
color: var(--translation-color);
|
||||
min-height: 22px;
|
||||
text-align: start;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,6 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .percent {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translate-alt);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@
|
|||
}
|
||||
|
||||
.project-menu .selector .icon {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.project-menu .menu {
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
color: var(--light-grey-7);
|
||||
line-height: 1.231em;
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .search-wrapper input[type='search'] {
|
||||
color: var(--white-1);
|
||||
color: var(--input-color-1);
|
||||
padding: 4px 3px 3px 25px;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
background: var(--input-background-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
|
|
@ -93,17 +93,17 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .static-links {
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.project-menu .menu .current a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.project-menu .menu .header {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
padding: 5px 4px;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@
|
|||
|
||||
.project-info .panel {
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
bottom: auto;
|
||||
color: var(--light-grey-7);
|
||||
padding: 10px 12px;
|
||||
|
|
@ -36,5 +38,5 @@
|
|||
}
|
||||
|
||||
.project-info .panel a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,13 @@
|
|||
}
|
||||
|
||||
.resource-menu .selector .icon {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.resource-menu .menu {
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
color: var(--light-grey-7);
|
||||
line-height: 1.231em;
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu .search-wrapper input[type='search'] {
|
||||
color: var(--white-1);
|
||||
color: var(--input-color-1);
|
||||
padding: 4px 3px 3px 25px;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
background: var(--input-background-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
|
|
@ -93,17 +93,17 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu .static-links {
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.resource-menu .menu .current a {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.resource-menu .menu .header {
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-bottom: 1px solid var(--main-border-1);
|
||||
padding: 5px 4px;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.resource-menu .menu .percent {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ export function ProgressChart({
|
|||
}: Props): React.ReactElement<'canvas'> {
|
||||
const canvas = useRef<HTMLCanvasElement>(null);
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const style = getComputedStyle(document.body);
|
||||
|
||||
useEffect(() => {
|
||||
if (canvas.current) {
|
||||
|
|
@ -43,11 +44,14 @@ export function ProgressChart({
|
|||
}
|
||||
|
||||
const data = [
|
||||
{ type: approved, color: '#7BC876' },
|
||||
{ type: pretranslated, color: '#C0FF00' },
|
||||
{ type: warnings, color: '#FFA10F' },
|
||||
{ type: errors, color: '#F36' },
|
||||
{ type: missing, color: '#5F7285' },
|
||||
{ type: approved, color: style.getPropertyValue('--status-translated') },
|
||||
{
|
||||
type: pretranslated,
|
||||
color: style.getPropertyValue('--status-pretranslated'),
|
||||
},
|
||||
{ type: warnings, color: style.getPropertyValue('--status-warning') },
|
||||
{ type: errors, color: style.getPropertyValue('--status-error') },
|
||||
{ type: missing, color: style.getPropertyValue('--status-missing') },
|
||||
];
|
||||
|
||||
// Clear old canvas content to avoid aliasing
|
||||
|
|
|
|||
|
|
@ -38,13 +38,15 @@
|
|||
|
||||
.progress-chart .menu {
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
left: 50%;
|
||||
line-height: 18px;
|
||||
margin-left: -200px; /* Must be half the width */
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 48px;
|
||||
top: 51px;
|
||||
width: 400px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -105,23 +107,23 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu .details div.approved {
|
||||
border-color: var(--light-green-1);
|
||||
border-color: var(--status-translated);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.pretranslated {
|
||||
border-color: var(--neon-green);
|
||||
border-color: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.warnings {
|
||||
border-color: var(--orange-1);
|
||||
border-color: var(--status-warning);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.errors {
|
||||
border-color: var(--red-pink);
|
||||
border-color: var(--status-error);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.missing {
|
||||
border-color: var(--blue-2);
|
||||
border-color: var(--status-missing);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div .title {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
|
||||
.filters-panel .menu {
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--main-border-1);
|
||||
bottom: auto;
|
||||
box-sizing: border-box;
|
||||
color: var(--light-grey-7);
|
||||
|
|
@ -96,7 +97,7 @@
|
|||
.filters-panel .menu li.horizontal-separator {
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
|
|
@ -130,7 +131,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li:hover .count {
|
||||
background: var(--grey-3);
|
||||
background: var(--translation-background);
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
|
|
@ -140,12 +141,12 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li .priority .fa-star {
|
||||
color: var(--grey-1);
|
||||
color: var(--icon-background-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.filters-panel .menu li .priority .fa-star.active {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.filters-panel
|
||||
|
|
@ -181,13 +182,13 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.author .name {
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
font-size: 16px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.filters-panel .menu li.author .role {
|
||||
color: var(--light-grey-7);
|
||||
color: var(--translation-secondary-color);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.author .count {
|
||||
|
|
@ -239,12 +240,12 @@
|
|||
.filters-panel .toolbar button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--light-grey-7);
|
||||
color: var(--transla-grey-7);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters-panel .toolbar button .fa {
|
||||
padding-right: 4px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.filters-panel .toolbar .clear-selection {
|
||||
|
|
@ -259,5 +260,5 @@
|
|||
.filters-panel .toolbar .clear-selection:hover,
|
||||
.filters-panel .toolbar .apply-selected:hover,
|
||||
.filters-panel .toolbar .apply-selected .applied-count {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
}
|
||||
|
||||
.search-box input[type='search'] {
|
||||
background: var(--dark-grey-1);
|
||||
background: var(--input-background-1);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 23px;
|
||||
|
|
@ -63,27 +63,27 @@
|
|||
}
|
||||
|
||||
.search-box .translated .status:before {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.search-box .pretranslated .status:before {
|
||||
color: var(--neon-green);
|
||||
color: var(--status-pretranslated);
|
||||
}
|
||||
|
||||
.search-box .warnings .status:before {
|
||||
color: var(--orange-1);
|
||||
color: var(--status-warning);
|
||||
}
|
||||
|
||||
.search-box .errors .status:before {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.search-box .missing .status:before {
|
||||
color: var(--blue-2);
|
||||
color: var(--status-missing);
|
||||
}
|
||||
|
||||
.search-box .unreviewed .status:before {
|
||||
color: var(--light-blue);
|
||||
color: var(--status-unreviewed);
|
||||
content: '';
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu .for-time-range button.save-range {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.for-time-range button:hover {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.for-time-range button .fa {
|
||||
|
|
@ -64,7 +64,9 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.time-range.editing input {
|
||||
border-color: var(--grey-2);
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--main-border-1);
|
||||
border-radius: 3px;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +75,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.time-range input.error {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.time-range .to input {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// Default Time Range chart configuration
|
||||
const style = getComputedStyle(document.body);
|
||||
|
||||
export const CHART_OPTIONS = {
|
||||
credits: {
|
||||
enabled: false,
|
||||
|
|
@ -86,7 +88,7 @@ export const CHART_OPTIONS = {
|
|||
stroke: 'none',
|
||||
width: null,
|
||||
style: {
|
||||
color: '#FFFFFF',
|
||||
color: style.getPropertyValue('--translation-color'),
|
||||
fontWeight: 300,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
|
|
@ -94,19 +96,19 @@ export const CHART_OPTIONS = {
|
|||
hover: {
|
||||
fill: 'none',
|
||||
style: {
|
||||
color: '#7BC876',
|
||||
color: style.getPropertyValue('--status-translated'),
|
||||
},
|
||||
},
|
||||
select: {
|
||||
fill: 'none',
|
||||
style: {
|
||||
color: '#7BC876',
|
||||
color: style.getPropertyValue('--status-translated-alt'),
|
||||
fontWeight: 300,
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
style: {
|
||||
color: '#888888',
|
||||
color: style.getPropertyValue('--translation-secondary-color'),
|
||||
cursor: 'default',
|
||||
},
|
||||
},
|
||||
|
|
@ -117,18 +119,18 @@ export const CHART_OPTIONS = {
|
|||
navigator: {
|
||||
height: 80,
|
||||
maskFill: 'rgba(77, 89, 103, 0.2)',
|
||||
outlineColor: '#4D5967',
|
||||
outlineColor: style.getPropertyValue('--icon-border-1'),
|
||||
handles: {
|
||||
backgroundColor: '#4D5967',
|
||||
borderColor: '#272A2F',
|
||||
backgroundColor: style.getPropertyValue('--icon-border-1'),
|
||||
borderColor: style.getPropertyValue('--time-range-handles'),
|
||||
},
|
||||
series: {
|
||||
type: 'column',
|
||||
color: '#7BC876',
|
||||
color: style.getPropertyValue('--status-translated'),
|
||||
},
|
||||
xAxis: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#4D5967',
|
||||
lineColor: style.getPropertyValue('--icon-border-1'),
|
||||
gridLineWidth: 0,
|
||||
labels: {
|
||||
enabled: false,
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.terms-list .term .translate {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.terms-list .term .usage .title {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
font-size: 11px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.plural-selector ul li button sup {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
padding-left: 1px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.translationform {
|
||||
background: var(--editor-form-background);
|
||||
line-height: 22px;
|
||||
padding: 10px;
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.translationform table {
|
||||
|
|
@ -17,23 +18,23 @@
|
|||
|
||||
.translationform label {
|
||||
background: transparent;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
border: 1px solid var(--translation-border);
|
||||
box-sizing: border-box;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 2px 5px 2px 0;
|
||||
padding: 0 4px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.translationform label > :not(:last-child)::after {
|
||||
content: '·';
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.translationform label .stress {
|
||||
color: var(--light-green-1);
|
||||
color: var(--status-translated-alt);
|
||||
}
|
||||
|
||||
.translationform .accesskey-input {
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
|
||||
.translationform .accesskeys .key.active,
|
||||
.translationform .accesskeys .key:hover:not(:disabled) {
|
||||
border-color: var(--light-green-1);
|
||||
border-color: var(--status-translated);
|
||||
}
|
||||
|
||||
.translationform .accesskeys .key:disabled {
|
||||
|
|
@ -81,12 +82,16 @@
|
|||
}
|
||||
|
||||
.cm-editor {
|
||||
background: white;
|
||||
color: var(--dark-grey-4);
|
||||
background: var(--editor-background);
|
||||
color: var(--editor-color);
|
||||
font-size: 14px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.cm-editor.cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cm-editor .cm-scroller {
|
||||
font-family: inherit;
|
||||
line-height: 22px;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.unsaved-changes .title {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
|
||||
.unsaved-changes .anyway {
|
||||
background: var(--red);
|
||||
background: var(--status-error);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.user-signin button {
|
||||
background: transparent;
|
||||
border: 1.5px solid var(--light-green-2);
|
||||
border: 1.5px solid var(--status-translated);
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
}
|
||||
|
||||
.user-signin button:hover {
|
||||
background-color: var(--light-green-2);
|
||||
background-color: var(--status-translated);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.user-menu .selector img,
|
||||
.user-menu .selector .menu-icon,
|
||||
.user-menu .menu li.details img {
|
||||
border: 2px solid var(--grey-3);
|
||||
border: 2px solid var(--icon-border-1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.user-menu .menu {
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
list-style: none;
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
|
||||
.user-menu .menu .horizontal-separator {
|
||||
border-top: 1px solid var(--grey-2);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.user-notification {
|
||||
border-top: 1px solid var(--dark-grey-1);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.user-notification:first-child:hover {
|
||||
border-color: var(--dark-grey-1);
|
||||
border-color: var(--main-border-1);
|
||||
}
|
||||
|
||||
.user-notification.unread {
|
||||
|
|
@ -37,12 +37,12 @@
|
|||
}
|
||||
|
||||
.user-notification span {
|
||||
color: var(--white-1);
|
||||
color: var(--translation-color);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.user-notification a {
|
||||
color: var(--red-pink);
|
||||
color: var(--status-error);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.user-notification .message.trim,
|
||||
.user-notification .message.trim p {
|
||||
pointer-events: none;
|
||||
color: var(--light-grey-7);
|
||||
color: var(--translation-secondary-color);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .selector .icon {
|
||||
color: var(--grey-3);
|
||||
color: var(--icon-border-1);
|
||||
font-size: 26px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.user-notifications-menu .selector .badge {
|
||||
background: var(--red-pink);
|
||||
background: var(--status-error);
|
||||
border: 3px solid var(--black-3);
|
||||
border-radius: 12px;
|
||||
color: var(--white-1);
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
.user-notifications-menu .menu {
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border: 1px solid var(--main-border-1);
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu li:hover {
|
||||
background: var(--dark-grey-2);
|
||||
background: var(--background-hover-2);
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu li.no {
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu .see-all {
|
||||
border-top: 1px solid var(--dark-grey-1);
|
||||
border-top: 1px solid var(--main-border-1);
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu .see-all a {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче