зеркало из https://github.com/mozilla/pontoon.git
Replace hard-coded color values with CSS variables stored in a theme file (#2957)
This PR addresses two key steps in the process of implementing theme support for Pontoon: 1. CSS Variable Introduction (Issue #2933): All hard-coded color values in Pontoon have been replaced with CSS variables. 2. Consolidation of CSS Variables (Issue #2934): All the extracted CSS variables have been consolidated and stored in a dedicated dark-theme.css file.
This commit is contained in:
ayanaar
GitHub
Родитель
1de4919051
Коммит
ec89c38bc4
|
|
@ -13,7 +13,7 @@ select {
|
|||
}
|
||||
|
||||
h1 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 48px;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 40px;
|
||||
|
|
@ -27,7 +27,7 @@ h1 aside {
|
|||
}
|
||||
|
||||
h1 a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -35,7 +35,7 @@ h1 a {
|
|||
}
|
||||
|
||||
body > form {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 14px;
|
||||
padding: 40px 20px 100px;
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@ h3 {
|
|||
}
|
||||
|
||||
h4 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
|
|
@ -116,7 +116,7 @@ textarea {
|
|||
}
|
||||
|
||||
form .button {
|
||||
background: #888888;
|
||||
background: 88;
|
||||
border: none;
|
||||
display: block;
|
||||
float: right;
|
||||
|
|
@ -126,7 +126,7 @@ form .button {
|
|||
}
|
||||
|
||||
.button.delete-inline {
|
||||
color: #333333;
|
||||
color: var(--dark-grey-3);
|
||||
font-size: 20px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
@ -150,21 +150,21 @@ form .button {
|
|||
|
||||
.controls .button.sync,
|
||||
.controls .button.sync:hover {
|
||||
background: #333941;
|
||||
color: #aaa;
|
||||
background: var(--dark-grey-1);
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.controls .button.pretranslate,
|
||||
.controls .button.pretranslate:hover {
|
||||
background: #333941;
|
||||
color: #aaa;
|
||||
background: var(--dark-grey-1);
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
}
|
||||
|
||||
form a:link,
|
||||
form a:visited {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -188,7 +188,7 @@ form a:visited {
|
|||
}
|
||||
|
||||
.double-list-selector .locale.select .menu {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
margin: 2px 0 -4px -1px;
|
||||
padding: 10px 0;
|
||||
width: 295px;
|
||||
|
|
@ -417,7 +417,7 @@ label[for='id_configuration_file'] a {
|
|||
|
||||
.externalresource .arrow::after {
|
||||
content: '▾';
|
||||
color: #000;
|
||||
color: var(--black-2);
|
||||
float: left;
|
||||
margin: 6px 0 0 -20px;
|
||||
pointer-events: none;
|
||||
|
|
@ -462,7 +462,7 @@ textarea.strings-source {
|
|||
}
|
||||
|
||||
.errorlist {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; /* Strange, but needed to keep controls in line when error occures */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
/* Dark Theme Variables */
|
||||
:root {
|
||||
--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 */
|
||||
--green-blue: #4fc4f666;
|
||||
--grey-9: #5f7285;
|
||||
--dark-purple: #f148fb33;
|
||||
--pink-3: #ffacfc;
|
||||
--dark-purple-2: #ffacfc33;
|
||||
--dark-magenta: #b3005e66;
|
||||
/* Insights Pretranslation Quality Chart */
|
||||
--brown-grey: #9c9290;
|
||||
--brown-grey-2: #c5bfbe;
|
||||
--lilac-purple: #9b93c9;
|
||||
--pink-2: #c46487;
|
||||
--light-pink-2: #ddb5d5;
|
||||
--light-pink-3: #f498b6;
|
||||
--light-pink-4: #c799bc;
|
||||
--dark-pink: #b173a0;
|
||||
--purple: #8074a8;
|
||||
--green-brown: #7c7270;
|
||||
}
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
.download-selector .selector .fa {
|
||||
float: right;
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 16px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
}
|
||||
|
||||
.download-selector .selector .fa:hover {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
}
|
||||
|
||||
.download-selector.opened .selector .fa {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ ul {
|
|||
}
|
||||
|
||||
#heading h1 a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#heading h1 .small {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-weight: 300;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .details .title {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -51,16 +51,16 @@ ul {
|
|||
}
|
||||
|
||||
#heading .details .value {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
}
|
||||
|
||||
#heading .details .value a {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading .details .value a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#heading .details .priority .value {
|
||||
|
|
@ -102,7 +102,7 @@ ul {
|
|||
|
||||
#heading .progress .number:after {
|
||||
content: '%';
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 100;
|
||||
|
|
@ -115,7 +115,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .legend li {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
|
|
@ -123,11 +123,11 @@ ul {
|
|||
}
|
||||
|
||||
#heading .legend li a {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading .legend li:hover a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#heading .legend li .status.fa {
|
||||
|
|
@ -136,16 +136,16 @@ ul {
|
|||
}
|
||||
|
||||
#heading .legend li span.value {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
}
|
||||
|
||||
#heading .legend li a span.value {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading .legend li:hover a span.value {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#heading .non-plottable {
|
||||
|
|
@ -153,7 +153,7 @@ ul {
|
|||
}
|
||||
|
||||
#heading .non-plottable p {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
line-height: 24px;
|
||||
text-align: right;
|
||||
|
|
@ -161,11 +161,11 @@ ul {
|
|||
}
|
||||
|
||||
#heading .non-plottable a p {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading .non-plottable a:hover p {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#heading .non-plottable p.value {
|
||||
|
|
@ -183,10 +183,10 @@ ul {
|
|||
}
|
||||
|
||||
#heading .non-plottable .unreviewed .status.fa:before {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#heading .non-plottable .unreviewed.pending .status.fa:before {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,5 +70,4 @@
|
|||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -8,11 +8,11 @@
|
|||
}
|
||||
|
||||
.menu.left-column li.selected {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.menu.left-column li.selected a {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.menu.left-column li {
|
||||
|
|
@ -26,12 +26,12 @@
|
|||
}
|
||||
|
||||
.menu.left-column .count {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.menu.right-column {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
float: right;
|
||||
width: 640px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,28 +17,28 @@
|
|||
}
|
||||
|
||||
.status.fa:before {
|
||||
color: #5f7285;
|
||||
color: var(--blue-2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.translated .status.fa:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.pretranslated .status.fa:before {
|
||||
color: #c0ff00;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.warnings .status.fa:before {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
}
|
||||
|
||||
.errors .status.fa:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.unreviewed .status.fa:before {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -58,13 +58,13 @@ button {
|
|||
}
|
||||
|
||||
body {
|
||||
background: #272a2f;
|
||||
color: #ebebeb;
|
||||
background: var(--black-3);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#heading,
|
||||
#middle {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
#heading,
|
||||
|
|
@ -87,7 +87,7 @@ button {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -95,7 +95,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
|
|
@ -103,7 +103,7 @@ h3 {
|
|||
}
|
||||
|
||||
h3 .stress {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
h3 .small {
|
||||
|
|
@ -113,20 +113,20 @@ h3 .small {
|
|||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
sup a:link,
|
||||
sup a:visited {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
|
|
@ -135,7 +135,7 @@ input[type='password'],
|
|||
input[type='url'],
|
||||
input[type='number'],
|
||||
textarea {
|
||||
background: #888888;
|
||||
background: var(--light-grey-2);
|
||||
border: none;
|
||||
padding: 4px 3px 3px;
|
||||
width: 205px;
|
||||
|
|
@ -152,7 +152,7 @@ input[type='password']:focus,
|
|||
input[type='url']:focus,
|
||||
input[type='number']:focus,
|
||||
textarea:focus {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--white-1);
|
||||
outline: none; /* Remove WebKit Glow */
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +161,7 @@ label {
|
|||
}
|
||||
|
||||
table {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
|
@ -172,11 +172,11 @@ tbody {
|
|||
}
|
||||
|
||||
thead tr {
|
||||
border-bottom: 1px solid #4d5967;
|
||||
border-bottom: 1px solid var(--grey-3);
|
||||
}
|
||||
|
||||
th {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -186,7 +186,7 @@ th {
|
|||
}
|
||||
|
||||
.table-sort th:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.table-sort th i {
|
||||
|
|
@ -213,11 +213,11 @@ td {
|
|||
}
|
||||
|
||||
table.striped tr:nth-child(even) {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
border-top: 1px solid #4d5967;
|
||||
border-top: 1px solid var(--grey-3);
|
||||
}
|
||||
|
||||
tfoot td {
|
||||
|
|
@ -231,15 +231,15 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.count {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
border-radius: 3px;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
margin-left: 5px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
|
|
@ -270,9 +270,9 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
bottom: 50px;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
|
|
@ -288,7 +288,7 @@ tfoot td a {
|
|||
|
||||
.select > .button.breadcrumbs,
|
||||
#go {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
font-size: 16px;
|
||||
height: 20px;
|
||||
margin: 10px 10px 10px 0;
|
||||
|
|
@ -311,7 +311,7 @@ tfoot td a {
|
|||
content: '';
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid #272a2f;
|
||||
border-left: 20px solid var(--black-3);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
|
|
@ -321,7 +321,7 @@ tfoot td a {
|
|||
content: '';
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid #3f4752;
|
||||
border-left: 20px solid var(--dark-grey-2);
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
|
|
@ -337,30 +337,30 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select > .button.breadcrumbs:hover {
|
||||
background: #4d5967;
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.select > .button.breadcrumbs:hover:after {
|
||||
border-left-color: #4d5967;
|
||||
border-left-color: var(--grey-3);
|
||||
}
|
||||
|
||||
.select.opened > .button.breadcrumbs {
|
||||
background: #4d5967;
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.select.opened > .button.breadcrumbs:after {
|
||||
border-left-color: #4d5967;
|
||||
border-left-color: var(--grey-3);
|
||||
}
|
||||
|
||||
#go {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
#go.active,
|
||||
#go:hover {
|
||||
background: #7bc876;
|
||||
color: #272a2f;
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
.project.select,
|
||||
|
|
@ -458,15 +458,15 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu ul li .chart span.translated {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
}
|
||||
|
||||
.select .menu ul li .chart span.pretranslated {
|
||||
background: #c0ff00;
|
||||
background: var(--neon-green);
|
||||
}
|
||||
|
||||
.select .menu ul li .chart span.missing {
|
||||
background: #5f7285;
|
||||
background: var(--blue-2);
|
||||
}
|
||||
|
||||
.select .menu ul li .latest {
|
||||
|
|
@ -484,7 +484,7 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.select .menu ul li .latest a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -507,27 +507,27 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.menu li {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.menu li.hover {
|
||||
color: #ffffff;
|
||||
background: #3f4752;
|
||||
color: var(--white-1);
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.menu li.hover a {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.menu li a:hover,
|
||||
.menu li a:active {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.menu li.horizontal-separator {
|
||||
border-top: 1px solid #525a65;
|
||||
border-top: 1px solid var(--grey-2);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
@ -549,13 +549,13 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.search-wrapper {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-wrapper .icon {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
|
|
@ -564,7 +564,7 @@ tfoot td a {
|
|||
|
||||
.search-wrapper input[type='search'] {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
|
|
@ -575,7 +575,7 @@ tfoot td a {
|
|||
|
||||
.menu input[type='search'] {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
float: none;
|
||||
font-weight: 300;
|
||||
padding-left: 25px;
|
||||
|
|
@ -588,13 +588,13 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.locale .code {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: rgba(51, 57, 65, 0.9);
|
||||
color: #7bc876;
|
||||
background: var(--grey-7);
|
||||
color: var(--light-green-1);
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
left: 0;
|
||||
|
|
@ -613,16 +613,16 @@ tfoot td a {
|
|||
}
|
||||
|
||||
.notification li.error {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
img.rounded {
|
||||
border-radius: 6px;
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
}
|
||||
|
||||
#error {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
bottom: 0;
|
||||
display: table;
|
||||
height: 100%;
|
||||
|
|
@ -642,8 +642,8 @@ img.rounded {
|
|||
}
|
||||
|
||||
#addon-promotion {
|
||||
background: #ff3366cc;
|
||||
border-bottom: 1px solid #333941;
|
||||
background: var(--pink);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
top: -44px;
|
||||
|
|
@ -665,13 +665,13 @@ body.addon-promotion-active #addon-promotion {
|
|||
#addon-promotion .dismiss {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 28px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#addon-promotion .dismiss:hover {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
#addon-promotion .text {
|
||||
|
|
@ -679,21 +679,21 @@ body.addon-promotion-active #addon-promotion {
|
|||
}
|
||||
|
||||
#addon-promotion .get {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
border-radius: 3px;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
#addon-promotion .get:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
body > header {
|
||||
background: #272a2f;
|
||||
border-bottom: 1px solid #333941;
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
height: 60px;
|
||||
transition: margin-top 0.3s;
|
||||
}
|
||||
|
|
@ -730,7 +730,7 @@ header nav .right .sign-in-header {
|
|||
|
||||
header nav .right .sign-in-header button {
|
||||
background: transparent;
|
||||
border: 1.5px solid #7bc176;
|
||||
border: 1.5px solid var(--light-green-2);
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
|
@ -743,7 +743,7 @@ header nav .right .sign-in-header button {
|
|||
}
|
||||
|
||||
header nav .right .sign-in-header button:hover {
|
||||
background-color: #7bc176;
|
||||
background-color: var(--light-green-2);
|
||||
}
|
||||
|
||||
header .select .menu {
|
||||
|
|
@ -767,16 +767,16 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#notifications .button .icon {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
font-size: 26px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
#notifications .button .badge {
|
||||
background: #f36;
|
||||
border: 3px solid #272a2f;
|
||||
background: var(--red-pink);
|
||||
border: 3px solid var(--black-3);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
|
|
@ -796,7 +796,7 @@ header .right .select .menu {
|
|||
|
||||
#notifications .menu,
|
||||
#profile .menu {
|
||||
border: 1px solid #333941;
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
|
@ -829,21 +829,21 @@ header .right .select .menu {
|
|||
.menu
|
||||
ul.notification-list
|
||||
li.notification-item[data-unread='true'] {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item span {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item a {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item .verb {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item .description ul {
|
||||
|
|
@ -864,11 +864,11 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
.notifications .menu li.notification-item .message.trim a {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item.hover .message.trim a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.notifications .menu li.notification-item .message.trim p {
|
||||
|
|
@ -882,7 +882,7 @@ header .right .select .menu {
|
|||
.notifications .menu li.notification-item .message h4,
|
||||
.notifications .menu li.notification-item .message h5,
|
||||
.notifications .menu li.notification-item .message h6 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
|
|
@ -913,7 +913,7 @@ header .right .select .menu {
|
|||
/* End message styling */
|
||||
|
||||
.notifications .menu li.notification-item .timeago {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
margin-top: 8px;
|
||||
|
|
@ -922,12 +922,12 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#notifications .menu li.horizontal-separator {
|
||||
border-color: #333941;
|
||||
border-color: var(--dark-grey-1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notification-list li.horizontal-separator {
|
||||
border-color: #272a2f;
|
||||
border-color: var(--black-3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
@ -939,20 +939,20 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
.notifications .menu li.no .icon {
|
||||
color: #333941;
|
||||
color: var(--dark-grey-1);
|
||||
font-size: 92px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.notifications .menu li.no .title,
|
||||
#profile .menu li.details .name {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.notifications .menu li.no .description,
|
||||
#profile .menu li.details .email {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -990,7 +990,7 @@ header .right .select .menu {
|
|||
}
|
||||
|
||||
#profile .button .menu-icon {
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
border-radius: 100%;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
|
|
@ -1043,21 +1043,21 @@ nav .links li {
|
|||
|
||||
.links li a:link,
|
||||
.links li a:visited {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.links li a:hover,
|
||||
.links li a:active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.submenu.tabs {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
}
|
||||
|
||||
.submenu .links a:link,
|
||||
.submenu .links a:visited {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: inline-block;
|
||||
padding: 6px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -1066,7 +1066,7 @@ nav .links li {
|
|||
.submenu .links li.active a,
|
||||
.submenu .links a:hover,
|
||||
.submenu .links a:active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.submenu.tabs .links {
|
||||
|
|
@ -1084,8 +1084,8 @@ nav .links li {
|
|||
}
|
||||
|
||||
.submenu.tabs .links li.active {
|
||||
border-color: #5e6475;
|
||||
background: #272a2f;
|
||||
border-color: var(--light-grey-1);
|
||||
background: var(--black-3);
|
||||
}
|
||||
|
||||
.submenu.tabs .links a {
|
||||
|
|
@ -1097,12 +1097,12 @@ nav .links li {
|
|||
}
|
||||
|
||||
.submenu.tabs .links a:hover {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.submenu.tabs .links li.active a {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.submenu.tabs .links a .fa {
|
||||
|
|
@ -1115,7 +1115,7 @@ noscript p {
|
|||
|
||||
#title,
|
||||
#title a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
|
|
@ -1134,7 +1134,7 @@ noscript p {
|
|||
}
|
||||
|
||||
#error #box a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 108px;
|
||||
}
|
||||
|
||||
|
|
@ -1146,14 +1146,14 @@ noscript p {
|
|||
|
||||
#subtitle,
|
||||
#subtitle a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 32px;
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#action {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
height: 40px;
|
||||
|
|
@ -1161,7 +1161,7 @@ noscript p {
|
|||
}
|
||||
|
||||
#action #link {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
body > form,
|
||||
|
|
@ -1183,12 +1183,12 @@ body > form,
|
|||
}
|
||||
|
||||
.check-box .fa:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.check-box.enabled .fa:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -1198,14 +1198,14 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
padding-bottom: 20px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#helpers > section ul li > header {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -1214,7 +1214,7 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li > header .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
|
@ -1224,7 +1224,7 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section.machinery ul li > header sup {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#helpers > section.machinery ul li > header .sources {
|
||||
|
|
@ -1300,13 +1300,13 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li > p ins {
|
||||
background: #4b6259;
|
||||
color: #9cd699;
|
||||
background: var(--forest-green-2);
|
||||
color: var(--light-green-3);
|
||||
}
|
||||
|
||||
#helpers > section ul li > p del {
|
||||
background: #674b54;
|
||||
color: #fe8f8f;
|
||||
background: var(--purple-pink);
|
||||
color: var(--coral);
|
||||
}
|
||||
|
||||
#helpers > section ul li > p ins mark,
|
||||
|
|
@ -1317,12 +1317,12 @@ body > form,
|
|||
}
|
||||
|
||||
#helpers > section ul li.disabled p {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#helpers > section ul li p.original {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.tabs nav ul li {
|
||||
|
|
@ -1347,7 +1347,7 @@ body > form,
|
|||
}
|
||||
|
||||
.no-results {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1379,10 +1379,10 @@ body > form,
|
|||
}
|
||||
|
||||
.controls .button {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 400;
|
||||
height: auto;
|
||||
padding: 6px;
|
||||
|
|
@ -1405,8 +1405,8 @@ body > form,
|
|||
.controls a.button:hover,
|
||||
.controls li.active a.button,
|
||||
.controls .button.active {
|
||||
background: #7bc876;
|
||||
color: #272a2f;
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
.controls .button.active {
|
||||
|
|
@ -1414,7 +1414,7 @@ body > form,
|
|||
}
|
||||
|
||||
.controls .button.selector:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -1442,8 +1442,8 @@ body > form,
|
|||
}
|
||||
|
||||
.controls > .search-wrapper input {
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
|
|
@ -1455,12 +1455,12 @@ body > form,
|
|||
}
|
||||
|
||||
.priority .fa-star {
|
||||
color: #637283;
|
||||
color: var(--grey-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.priority .fa-star.active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.container .info {
|
||||
|
|
@ -1478,5 +1478,5 @@ body > form,
|
|||
}
|
||||
|
||||
.container .info a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.table th:first-child {
|
||||
|
|
@ -118,21 +118,21 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.table a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
/* Selector must also match heading-info */
|
||||
.deadline time.approaching {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
}
|
||||
|
||||
/* Selector must also match heading-info */
|
||||
.deadline time.overdue {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.table td.code div {
|
||||
|
|
@ -143,7 +143,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table td.code a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
line-height: 47px;
|
||||
padding: 15px 5px 14px;
|
||||
}
|
||||
|
|
@ -171,15 +171,15 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity time:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.table .latest-activity .tooltip {
|
||||
display: block;
|
||||
background: #1c1e21;
|
||||
background: var(--black-1);
|
||||
border-radius: 10px;
|
||||
bottom: 30px;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
left: -100px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
|
|
@ -192,7 +192,7 @@ table.table.project-list.hidden {
|
|||
content: '';
|
||||
position: absolute;
|
||||
border: 10px solid;
|
||||
border-color: #1c1e21 transparent transparent transparent;
|
||||
border-color: var(--black-1) 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: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +212,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity .tooltip footer {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-style: italic;
|
||||
height: 48px;
|
||||
margin-top: 10px;
|
||||
|
|
@ -239,7 +239,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .latest-activity .tooltip footer .translation-action a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.table .latest-activity .tooltip footer img {
|
||||
|
|
@ -272,7 +272,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .chart-wrapper .unreviewed-status {
|
||||
color: #3f4752;
|
||||
color: var(--dark-grey-2);
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -280,27 +280,27 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .chart-wrapper .unreviewed-status.pending {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .translated {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .pretranslated {
|
||||
background: #c0ff00;
|
||||
background: var(--neon-green);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .warnings {
|
||||
background: #ffa10f;
|
||||
background: var(--orange-1);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .errors {
|
||||
background: #f36;
|
||||
background: var(--red-pink);
|
||||
}
|
||||
|
||||
.table .progress .chart-wrapper .missing {
|
||||
background: #5f7285;
|
||||
background: var(--blue-2);
|
||||
}
|
||||
|
||||
.table tr:hover .progress .chart-wrapper {
|
||||
|
|
@ -333,7 +333,7 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .legend li a {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
|
@ -346,31 +346,31 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .legend li.translated .title {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.table .progress .legend li.pretranslated .title {
|
||||
color: #c0ff00;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.table .progress .legend li.warnings .title {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
}
|
||||
|
||||
.table .progress .legend li.errors .title {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.table .progress .legend li.missing .title {
|
||||
color: #7c8b9c;
|
||||
color: var(--light-grey-5);
|
||||
}
|
||||
|
||||
.table .progress .legend li.unreviewed .title {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.table .progress .legend li.all .title {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.table .progress .legend li .value {
|
||||
|
|
@ -379,10 +379,10 @@ table.table.project-list.hidden {
|
|||
}
|
||||
|
||||
.table .progress .legend li a:hover .title {
|
||||
color: #ebebeb;
|
||||
color: var(--white-3);
|
||||
}
|
||||
|
||||
.table .progress .legend li a:hover .value {
|
||||
color: #ebebeb;
|
||||
color: var(--white-3);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
#main .container {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#main a:link,
|
||||
#main a:visited {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#main p,
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
#main dt {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 28px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
}
|
||||
|
||||
.toggle-button button {
|
||||
background: #272a2f;
|
||||
border: 1px solid #666;
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--light-grey-3);
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
color: #777777;
|
||||
color: var(--grey-6);
|
||||
float: none;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
.toggle-button button:first-child {
|
||||
border-right-color: #4d5967;
|
||||
border-right-color: var(--grey-3);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
}
|
||||
|
||||
.toggle-button button:hover {
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
.toggle-button button.active {
|
||||
background: #333941;
|
||||
border-color: #4d5967;
|
||||
color: #aaa;
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--grey-3);
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
<link rel="stylesheet" href="{% static 'css/fonts.css' %}" title="" type="text/css" />
|
||||
<link rel="stylesheet" href="{% static 'css/boilerplate.css' %}" title="" type="text/css" />
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}" title="" type="text/css" />
|
||||
<link rel="stylesheet" href="{% static 'css/dark-theme.css' %}" title="" type="text/css" />
|
||||
|
||||
{% include "tracker.html" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ a.avatar {
|
|||
|
||||
a.avatar .desc {
|
||||
bottom: 0;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#heading .banner .title {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#heading .legend {
|
||||
|
|
@ -51,7 +51,7 @@ body.top-contributors #heading .legend li .status.fa {
|
|||
}
|
||||
|
||||
.contributor p.role {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
left: 67px;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
|
|
@ -68,7 +68,7 @@ body.top-contributors #heading .legend li .status.fa {
|
|||
}
|
||||
|
||||
.details div p {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
th:last-child,
|
||||
|
|
@ -91,11 +91,11 @@ th:last-child sup {
|
|||
}
|
||||
|
||||
.stats .details div.approved {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.stats .details div.unreviewed {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.stats .details div p {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
#main .container .left-column {
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
margin-right: 30px;
|
||||
width: 260px;
|
||||
}
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
}
|
||||
|
||||
#main .container .left-column hr {
|
||||
border-color: #4d5967;
|
||||
border-color: var(--grey-3);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4em;
|
||||
|
|
@ -32,7 +32,7 @@ h2 {
|
|||
}
|
||||
|
||||
.avatar img.rounded {
|
||||
border-color: #333941;
|
||||
border-color: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.display-name {
|
||||
|
|
@ -41,7 +41,7 @@ h2 {
|
|||
}
|
||||
|
||||
.username {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
line-height: 1.4em;
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
|
|
@ -53,7 +53,7 @@ h2 {
|
|||
}
|
||||
|
||||
.item-with-icon {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.8em;
|
||||
|
|
@ -73,20 +73,20 @@ h2 {
|
|||
}
|
||||
|
||||
.item-with-icon a {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.item-with-icon a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.item-with-icon .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.personal-information .button {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
|
|
@ -103,11 +103,11 @@ h4 {
|
|||
}
|
||||
|
||||
h4.superuser {
|
||||
border: 1px solid #f36;
|
||||
border: 1px solid var(--red-pink);
|
||||
border-radius: 16px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
/* Approval Ratio */
|
||||
|
|
@ -148,7 +148,7 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#insights .chart-group-navigation ul li .icon {
|
||||
background-color: #272a2f;
|
||||
background-color: var(--black-3);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
|
|
@ -157,33 +157,33 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#insights .chart-group-navigation ul li .label {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
#insights .chart-group-navigation ul li.active .icon {
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#insights .chart-group-navigation ul li.active .label {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.current-month::marker {
|
||||
color: #41554c;
|
||||
color: var(--forest-green-1);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.twelve-month-average::marker {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
/* Stats */
|
||||
|
||||
#stats {
|
||||
border-radius: 6px;
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
box-sizing: border-box;
|
||||
float: right;
|
||||
padding: 20px;
|
||||
|
|
@ -201,21 +201,21 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#stats > div span {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#stats > div.translated span {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#stats > div.unreviewed span {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
#stats > div p {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -268,14 +268,14 @@ h4.superuser {
|
|||
}
|
||||
|
||||
#contributions .type-selector .menu {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
bottom: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#contributions .type-selector .menu li span {
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -286,7 +286,7 @@ h4.superuser {
|
|||
|
||||
#contributions h3,
|
||||
#timeline h3 {
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
|
|
@ -296,19 +296,19 @@ h4.superuser {
|
|||
#contribution-graph rect.day:hover,
|
||||
#contribution-graph rect.day.selected {
|
||||
stroke-width: 1;
|
||||
stroke: #fff;
|
||||
stroke: var(--white-1);
|
||||
}
|
||||
|
||||
svg.js-calendar-graph-svg {
|
||||
fill: #aaa;
|
||||
fill: var(--light-grey-7);
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.svg-tip {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: #bbb;
|
||||
background: var(--black-4);
|
||||
color: var(--light-grey-4);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
|
|
@ -326,13 +326,13 @@ svg.js-calendar-graph-svg {
|
|||
margin: 0 0 0 -5px;
|
||||
content: ' ';
|
||||
border: 5px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, 0.8);
|
||||
border-top-color: var(--black-4);
|
||||
}
|
||||
|
||||
/* Contribution Timeline */
|
||||
|
||||
#timeline {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -341,15 +341,15 @@ svg.js-calendar-graph-svg {
|
|||
}
|
||||
|
||||
#timeline .contribution-group {
|
||||
border-left: 2px solid #333941;
|
||||
border-left: 2px solid var(--dark-grey-1);
|
||||
margin-left: 20px;
|
||||
padding: 20px 0 20px 30px;
|
||||
}
|
||||
|
||||
#timeline .heading {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
padding: 20px 20px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -360,12 +360,12 @@ svg.js-calendar-graph-svg {
|
|||
bottom: 2px;
|
||||
content: ' ';
|
||||
border: 7px solid transparent;
|
||||
border-right-color: #333941;
|
||||
border-right-color: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
#timeline .heading .icon {
|
||||
background: #333941;
|
||||
border: 2px solid #272a2f;
|
||||
background: var(--dark-grey-1);
|
||||
border: 2px solid var(--black-3);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 36px;
|
||||
|
|
@ -378,7 +378,7 @@ svg.js-calendar-graph-svg {
|
|||
}
|
||||
|
||||
#timeline .heading .icon:before {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
|
@ -395,7 +395,7 @@ svg.js-calendar-graph-svg {
|
|||
}
|
||||
|
||||
#timeline .localizations {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border-radius: 0 0 6px 6px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
@ -408,19 +408,19 @@ svg.js-calendar-graph-svg {
|
|||
}
|
||||
|
||||
#timeline .localizations li:hover {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
}
|
||||
|
||||
#timeline .localizations li a {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#timeline .localizations li a .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#timeline .localizations li a .contribution-count {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
#locale-settings .label,
|
||||
.toggle-label {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
#locale-settings .locale-selector .locale.select .button {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
height: 32px;
|
||||
|
|
@ -40,11 +40,11 @@
|
|||
}
|
||||
|
||||
#locale-settings .locale-selector .locale.select .button:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#locale-settings .locale-selector .locale.select .menu {
|
||||
border: 1px solid #333941;
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
top: 30px;
|
||||
width: 295px;
|
||||
z-index: 30;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
|
||||
#display-name {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 48px;
|
||||
letter-spacing: normal;
|
||||
padding: 10px 0 0;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
|
||||
#main .field {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
|
|
@ -98,14 +98,14 @@
|
|||
}
|
||||
|
||||
#main .field label:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#main .field input,
|
||||
#main .field textarea {
|
||||
color: #aaaaaa;
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
color: var(--light-grey-7);
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
float: none;
|
||||
padding: 4px;
|
||||
|
|
@ -125,12 +125,12 @@
|
|||
}
|
||||
|
||||
#main .field .help {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#main .field .verify {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
|
||||
#main .check-list li {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: table;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
}
|
||||
|
||||
#main .check-list li:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#main .check-list .fa {
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
}
|
||||
|
||||
.errorlist {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
font-style: italic;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ const shortDateFormat = new Intl.DateTimeFormat('en-US', {
|
|||
year: 'numeric',
|
||||
});
|
||||
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
|
||||
var Pontoon = (function (my) {
|
||||
return $.extend(true, my, {
|
||||
insights: {
|
||||
|
|
@ -37,7 +39,7 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 160);
|
||||
gradient.addColorStop(0, '#7BC87633');
|
||||
gradient.addColorStop(0, style.getPropertyValue('--dark-green'));
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
new Chart(chart, {
|
||||
|
|
@ -50,28 +52,31 @@ var Pontoon = (function (my) {
|
|||
label: 'Current month',
|
||||
data: data1,
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#41554c'],
|
||||
borderColor: [style.getPropertyValue('--forest-green-1')],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#41554c',
|
||||
pointBackgroundColor:
|
||||
style.getPropertyValue('--forest-green-1'),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#41554c',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--forest-green-1'),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
label: '12-month average',
|
||||
data: data2,
|
||||
borderColor: ['#7BC876'],
|
||||
borderColor: [style.getPropertyValue('--light-green-1')],
|
||||
borderWidth: 1,
|
||||
pointBackgroundColor: '#7BC876',
|
||||
pointBackgroundColor: style.getPropertyValue('--light-green-1'),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#7BC876',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor:
|
||||
style.getPropertyValue('--light-green-1'),
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
order: 1,
|
||||
},
|
||||
],
|
||||
|
|
@ -83,7 +88,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#7BC876',
|
||||
borderColor: style.getPropertyValue('--light-green-1'),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -183,19 +188,19 @@ var Pontoon = (function (my) {
|
|||
let color;
|
||||
switch (true) {
|
||||
case count === 0:
|
||||
color = '#333941';
|
||||
color = style.getPropertyValue('--dark-grey-1');
|
||||
break;
|
||||
case count < 10:
|
||||
color = '#41554c';
|
||||
color = style.getPropertyValue('--forest-green-1');
|
||||
break;
|
||||
case count < 25:
|
||||
color = '#4f7256';
|
||||
color = style.getPropertyValue('--green');
|
||||
break;
|
||||
case count < 50:
|
||||
color = '#64906D';
|
||||
color = style.getPropertyValue('--green-2');
|
||||
break;
|
||||
default:
|
||||
color = '#7bc876';
|
||||
color = style.getPropertyValue('--light-green-1');
|
||||
}
|
||||
|
||||
const y = currentDate.getDay() * step;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ body > header {
|
|||
}
|
||||
|
||||
body > header.menu-opened {
|
||||
border-color: #333941;
|
||||
border-color: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -24,7 +24,7 @@ body > header.menu-opened {
|
|||
}
|
||||
|
||||
#main p {
|
||||
color: #dddddd;
|
||||
color: var(--white-4);
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ body > header.menu-opened {
|
|||
}
|
||||
|
||||
.section {
|
||||
color: #f4f4f4;
|
||||
color: var(--white-2);
|
||||
}
|
||||
|
||||
.section .container {
|
||||
|
|
@ -62,7 +62,7 @@ body > header.menu-opened {
|
|||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
letter-spacing: -1px;
|
||||
|
|
@ -72,8 +72,8 @@ h2 {
|
|||
}
|
||||
|
||||
#main .button {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
background-color: var(--white-1);
|
||||
color: var(--black-2);
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
width: 240px;
|
||||
|
|
@ -85,7 +85,7 @@ h2 {
|
|||
}
|
||||
|
||||
#main .button.primary {
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -143,7 +143,7 @@ nav#sections ul li:hover a.active span {
|
|||
width: 12px;
|
||||
margin: -6px 0 0 -6px;
|
||||
border-radius: 100%;
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
nav#sections ul li a span {
|
||||
|
|
@ -153,7 +153,7 @@ nav#sections ul li a span {
|
|||
height: 4px;
|
||||
width: 4px;
|
||||
border: 0;
|
||||
background-color: #888888;
|
||||
background-color: var(--light-grey-2);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -2px 0 0 -2px;
|
||||
|
|
@ -186,8 +186,8 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#edit-homepage .button {
|
||||
background: #7bc876;
|
||||
color: #000;
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-2);
|
||||
}
|
||||
|
||||
#edit-homepage .fa {
|
||||
|
|
@ -238,8 +238,8 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
|
||||
#section-1 .scroll::after {
|
||||
content: '';
|
||||
border-right: 2px solid #7bc876;
|
||||
border-bottom: 2px solid #7bc876;
|
||||
border-right: 2px solid var(--light-green-1);
|
||||
border-bottom: 2px solid var(--light-green-1);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
|
|
@ -271,7 +271,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
margin-top: 40px;
|
||||
width: 2px;
|
||||
height: 290px;
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#section-3 ol {
|
||||
|
|
@ -285,16 +285,16 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-3 li {
|
||||
color: #dddddd;
|
||||
color: var(--white-4);
|
||||
counter-increment: item;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
#section-3 li:before {
|
||||
background-color: #272a2f;
|
||||
border: 2px solid #7bc876;
|
||||
background-color: var(--black-3);
|
||||
border: 2px solid var(--light-green-1);
|
||||
border-radius: 100%;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
content: counter(item);
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
|
|
@ -307,7 +307,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-3 .checkmark {
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
border-radius: 100%;
|
||||
width: 54px;
|
||||
height: 39px;
|
||||
|
|
@ -324,7 +324,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-4 .box {
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
margin-left: 20px;
|
||||
padding: 10px;
|
||||
|
|
@ -334,7 +334,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-4 .box .box-image {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 35px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -354,7 +354,7 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-5 img {
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
width: 436px;
|
||||
}
|
||||
|
|
@ -401,9 +401,9 @@ body.addon-promotion-active #edit-homepage .select {
|
|||
}
|
||||
|
||||
#section-6 .footer a {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#section-6 .footer a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
#insights .block {
|
||||
border-radius: 6px;
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
overflow: hidden;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#insights h3 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-3);
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
/* Tooltip */
|
||||
|
||||
#insights .controls .selector {
|
||||
background: #3f4752;
|
||||
color: #aaa;
|
||||
background: var(--dark-grey-2);
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -37,11 +37,11 @@
|
|||
|
||||
#insights h3 .fa.active,
|
||||
#insights h3 .fa:hover {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip {
|
||||
background: #000000dd;
|
||||
background: var(--black-6);
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
|
|
@ -96,9 +96,9 @@
|
|||
}
|
||||
|
||||
#insights .legend li.disabled .label {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
}
|
||||
|
||||
#insights .legend li.disabled .label:hover {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
|
||||
#insights .controls .period-selector li .selector.active,
|
||||
#insights .controls .period-selector li .selector:hover {
|
||||
background: #7bc876;
|
||||
color: #272a2f;
|
||||
background: var(--light-green-1);
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
/* Active users */
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
|
||||
#insights .active-users-chart .active {
|
||||
border-bottom: 2px solid #888888;
|
||||
border-bottom: 2px solid var(--light-grey-2);
|
||||
display: inline-block;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
#insights .active-users-chart .total {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 16px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -84,23 +84,23 @@
|
|||
/* Active users info tooltip */
|
||||
|
||||
#insights h3 .tooltip li::marker {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
/* Time to review suggestions and Age of unreviewed info tooltip */
|
||||
|
||||
#insights h3 .tooltip li.current-month::marker {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.twelve-month-average::marker {
|
||||
color: #385465;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
/* Time to review pretranslations */
|
||||
|
||||
#insights .time-to-review-pretranslations h3 .tooltip li.current-month::marker {
|
||||
color: #ff5f9e;
|
||||
color: var(--hot-pink);
|
||||
}
|
||||
|
||||
#insights
|
||||
|
|
@ -108,67 +108,67 @@
|
|||
h3
|
||||
.tooltip
|
||||
li.twelve-month-average::marker {
|
||||
color: #b3005e;
|
||||
color: var(--dark-pink);
|
||||
}
|
||||
|
||||
/* Translation activity info tooltip */
|
||||
|
||||
#insights h3 .tooltip li.human-translations::marker {
|
||||
color: #4f7256;
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.machinery-translations::marker {
|
||||
color: #41554c;
|
||||
color: var(--forest-green-1);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.new-source-strings::marker {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.completion::marker {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
/* Review activity info tooltip */
|
||||
|
||||
#insights h3 .tooltip li.peer-approved::marker {
|
||||
color: #3e7089;
|
||||
color: var(--blue-1);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.self-approved::marker {
|
||||
color: #385465;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.rejected::marker {
|
||||
color: #843650;
|
||||
color: var(--magenta);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.new-suggestions::marker {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
#insights h3 .tooltip li.unreviewed::marker {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
/* Pretranslation quality info tooltip */
|
||||
|
||||
#insights .pretranslation-quality h3 .tooltip li.approval-rate::marker {
|
||||
color: #c6c1f0;
|
||||
color: var(--lilac);
|
||||
}
|
||||
|
||||
#insights .pretranslation-quality h3 .tooltip li.chrf-score::marker {
|
||||
color: #8074a8;
|
||||
color: var(--purple);
|
||||
}
|
||||
|
||||
#insights .pretranslation-quality h3 .tooltip li.approved::marker {
|
||||
color: #c46487;
|
||||
color: var(--pink-2);
|
||||
}
|
||||
|
||||
#insights .pretranslation-quality h3 .tooltip li.rejected::marker {
|
||||
color: #ffbed1;
|
||||
color: var(--light-pink);
|
||||
}
|
||||
|
||||
#insights .pretranslation-quality h3 .tooltip li.new-pretranslations::marker {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ const longMonthFormat = new Intl.DateTimeFormat('en', {
|
|||
year: 'numeric',
|
||||
});
|
||||
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
|
||||
var Pontoon = (function (my) {
|
||||
return $.extend(true, my, {
|
||||
insights: {
|
||||
|
|
@ -28,19 +30,19 @@ var Pontoon = (function (my) {
|
|||
}
|
||||
|
||||
const colors = [
|
||||
'#fff',
|
||||
'#8074a8',
|
||||
'#c6c1f0',
|
||||
'#c46487',
|
||||
'#ffbed1',
|
||||
'#9c9290',
|
||||
'#c5bfbe',
|
||||
'#9b93c9',
|
||||
'#ddb5d5',
|
||||
'#7c7270',
|
||||
'#f498b6',
|
||||
'#b173a0',
|
||||
'#c799bc',
|
||||
style.getPropertyValue('--white-1'),
|
||||
style.getPropertyValue('--purple'),
|
||||
style.getPropertyValue('--lilac'),
|
||||
style.getPropertyValue('--pink-2'),
|
||||
style.getPropertyValue('--light-pink'),
|
||||
style.getPropertyValue('--brown-grey'),
|
||||
style.getPropertyValue('--brown-grey-2'),
|
||||
style.getPropertyValue('--lilac-purple'),
|
||||
style.getPropertyValue('--light-pink-2'),
|
||||
style.getPropertyValue('--green-brown'),
|
||||
style.getPropertyValue('--light-pink-3'),
|
||||
style.getPropertyValue('--dark-pink'),
|
||||
style.getPropertyValue('--light-pink-4'),
|
||||
];
|
||||
|
||||
const datasets = chart.data('dataset').map(function (item, index) {
|
||||
|
|
@ -56,7 +58,7 @@ var Pontoon = (function (my) {
|
|||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: color,
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBorderColor: style.getPropertyValue('--white-1'),
|
||||
spanGaps: true,
|
||||
};
|
||||
});
|
||||
|
|
@ -75,7 +77,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#FFF',
|
||||
borderColor: style.getPropertyValue('--white-1').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
var Pontoon = (function (my) {
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
return $.extend(true, my, {
|
||||
insights: {
|
||||
initialize: function () {
|
||||
|
|
@ -34,7 +35,8 @@ var Pontoon = (function (my) {
|
|||
});
|
||||
|
||||
// Set up default Chart.js configuration
|
||||
Chart.defaults.global.defaultFontColor = '#AAA';
|
||||
Chart.defaults.global.defaultFontColor =
|
||||
style.getPropertyValue('--light-grey-7');
|
||||
Chart.defaults.global.defaultFontFamily = 'Open Sans';
|
||||
Chart.defaults.global.defaultFontStyle = '100';
|
||||
Chart.defaults.global.datasets.bar.barPercentage = 0.7;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ var Pontoon = (function (my) {
|
|||
style: 'percent',
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
return $.extend(true, my, {
|
||||
insights: {
|
||||
renderCharts: function () {
|
||||
|
|
@ -42,7 +42,11 @@ var Pontoon = (function (my) {
|
|||
}
|
||||
var activeStart = -0.5;
|
||||
var activeEnd = activeStart + activeLength;
|
||||
plot(activeStart, activeEnd, '#7BC876');
|
||||
plot(
|
||||
activeStart,
|
||||
activeEnd,
|
||||
style.getPropertyValue('--light-green-1').trim(),
|
||||
);
|
||||
|
||||
var inactiveLength = 2;
|
||||
if (total !== 0) {
|
||||
|
|
@ -50,7 +54,11 @@ var Pontoon = (function (my) {
|
|||
}
|
||||
var inactiveStart = activeEnd;
|
||||
var inactiveEnd = inactiveStart + inactiveLength;
|
||||
plot(inactiveStart, inactiveEnd, '#5F7285');
|
||||
plot(
|
||||
inactiveStart,
|
||||
inactiveEnd,
|
||||
style.getPropertyValue('--grey-9').trim(),
|
||||
);
|
||||
|
||||
// Update number
|
||||
parent.find('.active').html(active);
|
||||
|
|
@ -72,7 +80,8 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 160);
|
||||
gradient.addColorStop(0, '#4fc4f666');
|
||||
let greenBlue = style.getPropertyValue('--green-blue').trim();
|
||||
gradient.addColorStop(0, greenBlue);
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
new Chart(chart, {
|
||||
|
|
@ -84,14 +93,24 @@ var Pontoon = (function (my) {
|
|||
label: 'Age of unreviewed suggestions',
|
||||
data: chart.data('lifespans'),
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#4fc4f6'],
|
||||
borderColor: [style.getPropertyValue('--light-blue').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#4fc4f6',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#4fc4f6',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -100,7 +119,7 @@ var Pontoon = (function (my) {
|
|||
display: false,
|
||||
},
|
||||
tooltips: {
|
||||
borderColor: '#4fc4f6',
|
||||
borderColor: style.getPropertyValue('--light-blue').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -156,7 +175,7 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 160);
|
||||
gradient.addColorStop(0, '#4fc4f666');
|
||||
gradient.addColorStop(0, style.getPropertyValue('--green-blue').trim());
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
new Chart(chart, {
|
||||
|
|
@ -169,14 +188,22 @@ var Pontoon = (function (my) {
|
|||
label: 'Current month',
|
||||
data: chart.data('time-to-review-suggestions'),
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#3e7089'],
|
||||
borderColor: [style.getPropertyValue('--blue-1').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#3e7089',
|
||||
pointBackgroundColor: style.getPropertyValue('--blue-1').trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#3e7089',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--blue-1')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
order: 2,
|
||||
spanGaps: true,
|
||||
},
|
||||
|
|
@ -184,14 +211,24 @@ var Pontoon = (function (my) {
|
|||
type: 'line',
|
||||
label: '12-month average',
|
||||
data: chart.data('time-to-review-suggestions-12-month-avg'),
|
||||
borderColor: ['#4fc4f6'],
|
||||
borderColor: [style.getPropertyValue('--light-blue').trim()],
|
||||
borderWidth: 1,
|
||||
pointBackgroundColor: '#4fc4f6',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#4fc4f6',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
order: 1,
|
||||
spanGaps: true,
|
||||
},
|
||||
|
|
@ -204,7 +241,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#4fc4f6',
|
||||
borderColor: style.getPropertyValue('--light-blue').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -261,7 +298,10 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 160);
|
||||
gradient.addColorStop(0, '#b3005e66');
|
||||
gradient.addColorStop(
|
||||
0,
|
||||
style.getPropertyValue('--dark-magenta').trim(),
|
||||
);
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
new Chart(chart, {
|
||||
|
|
@ -274,14 +314,24 @@ var Pontoon = (function (my) {
|
|||
label: 'Current month',
|
||||
data: chart.data('time-to-review-pretranslations'),
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#ff5f9e'],
|
||||
borderColor: [style.getPropertyValue('--hot-pink').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#ff5f9e',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--hot-pink')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#ff5f9e',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--hot-pink')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
order: 2,
|
||||
spanGaps: true,
|
||||
},
|
||||
|
|
@ -289,14 +339,24 @@ var Pontoon = (function (my) {
|
|||
type: 'line',
|
||||
label: '12-month average',
|
||||
data: chart.data('time-to-review-pretranslations-12-month-avg'),
|
||||
borderColor: ['#b3005e'],
|
||||
borderColor: [style.getPropertyValue('--dark-pink').trim()],
|
||||
borderWidth: 1,
|
||||
pointBackgroundColor: '#b3005e',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--dark-pink')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#b3005e',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--dark-pink')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
order: 1,
|
||||
spanGaps: true,
|
||||
},
|
||||
|
|
@ -309,7 +369,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#b3005e',
|
||||
borderColor: style.getPropertyValue('--dark-pink').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -366,7 +426,7 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient.addColorStop(0, '#7BC87633');
|
||||
gradient.addColorStop(0, style.getPropertyValue('--dark-green').trim());
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
var humanData = chart.data('human-translations') || [];
|
||||
|
|
@ -384,22 +444,32 @@ var Pontoon = (function (my) {
|
|||
data: chart.data('completion'),
|
||||
yAxisID: 'completion-y-axis',
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#7BC876'],
|
||||
borderColor: [style.getPropertyValue('--light-green-1').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#7BC876',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--light-green-1')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#7BC876',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--light-green-1')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
},
|
||||
humanData.length > 0 && {
|
||||
type: 'bar',
|
||||
label: 'Human translations',
|
||||
data: humanData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#4f7256',
|
||||
hoverBackgroundColor: '#4f7256',
|
||||
backgroundColor: style.getPropertyValue('--green').trim(),
|
||||
hoverBackgroundColor: style.getPropertyValue('--green').trim(),
|
||||
stack: 'translations',
|
||||
order: 2,
|
||||
},
|
||||
|
|
@ -408,8 +478,12 @@ var Pontoon = (function (my) {
|
|||
label: 'Machinery translations',
|
||||
data: machineryData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#41554c',
|
||||
hoverBackgroundColor: '#41554c',
|
||||
backgroundColor: style
|
||||
.getPropertyValue('--forest-green-1')
|
||||
.trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--forest-green-1')
|
||||
.trim(),
|
||||
stack: 'translations',
|
||||
order: 1,
|
||||
},
|
||||
|
|
@ -418,8 +492,10 @@ var Pontoon = (function (my) {
|
|||
label: 'New source strings',
|
||||
data: newSourcesData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#272a2f',
|
||||
hoverBackgroundColor: '#272a2f',
|
||||
backgroundColor: style.getPropertyValue('--black-3').trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--black-3')
|
||||
.trim(),
|
||||
stack: 'source-strings',
|
||||
order: 3,
|
||||
hidden: true,
|
||||
|
|
@ -434,7 +510,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#7BC876',
|
||||
borderColor: style.getPropertyValue('--light-green-1').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -500,7 +576,7 @@ var Pontoon = (function (my) {
|
|||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'COMPLETION',
|
||||
fontColor: '#FFF',
|
||||
fontColor: style.getPropertyValue('--white-1').trim(),
|
||||
fontStyle: 100,
|
||||
},
|
||||
gridLines: {
|
||||
|
|
@ -522,7 +598,7 @@ var Pontoon = (function (my) {
|
|||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'STRINGS',
|
||||
fontColor: '#FFF',
|
||||
fontColor: style.getPropertyValue('--white-1').trim(),
|
||||
fontStyle: 100,
|
||||
},
|
||||
gridLines: {
|
||||
|
|
@ -555,7 +631,7 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient.addColorStop(0, '#4fc4f688');
|
||||
gradient.addColorStop(0, style.getPropertyValue('--light-blue').trim());
|
||||
gradient.addColorStop(1, 'transparent');
|
||||
|
||||
var unreviewedData = chart.data('unreviewed') || [];
|
||||
|
|
@ -575,22 +651,32 @@ var Pontoon = (function (my) {
|
|||
data: unreviewedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: gradient,
|
||||
borderColor: ['#4fc4f6'],
|
||||
borderColor: [style.getPropertyValue('--light-blue').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#4fc4f6',
|
||||
pointBackgroundColor: style
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#4fc4f6',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--light-blue')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
},
|
||||
peerApprovedData.length > 0 && {
|
||||
type: 'bar',
|
||||
label: 'Peer-approved',
|
||||
data: peerApprovedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#3e7089',
|
||||
hoverBackgroundColor: '#3e7089',
|
||||
backgroundColor: style.getPropertyValue('--blue-1').trim(),
|
||||
hoverBackgroundColor: style.getPropertyValue('--blue-1').trim(),
|
||||
stack: 'review-actions',
|
||||
order: 3,
|
||||
},
|
||||
|
|
@ -599,8 +685,8 @@ var Pontoon = (function (my) {
|
|||
label: 'Self-approved',
|
||||
data: selfApprovedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#385465',
|
||||
hoverBackgroundColor: '#385465',
|
||||
backgroundColor: style.getPropertyValue('--grey-5').trim(),
|
||||
hoverBackgroundColor: style.getPropertyValue('--grey-5').trim(),
|
||||
stack: 'review-actions',
|
||||
order: 2,
|
||||
},
|
||||
|
|
@ -609,8 +695,10 @@ var Pontoon = (function (my) {
|
|||
label: 'Rejected',
|
||||
data: rejectedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#843650',
|
||||
hoverBackgroundColor: '#843650',
|
||||
backgroundColor: style.getPropertyValue('--magenta').trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--magenta')
|
||||
.trim(),
|
||||
stack: 'review-actions',
|
||||
order: 1,
|
||||
},
|
||||
|
|
@ -619,8 +707,10 @@ var Pontoon = (function (my) {
|
|||
label: 'New suggestions',
|
||||
data: chart.data('new-suggestions'),
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#272a2f',
|
||||
hoverBackgroundColor: '#272a2f',
|
||||
backgroundColor: style.getPropertyValue('--black-3').trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--black-3')
|
||||
.trim(),
|
||||
stack: 'new-suggestions',
|
||||
order: 4,
|
||||
hidden: true,
|
||||
|
|
@ -635,7 +725,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#4fc4f6',
|
||||
borderColor: style.getPropertyValue('--light-blue').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -716,7 +806,7 @@ var Pontoon = (function (my) {
|
|||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'STRINGS',
|
||||
fontColor: '#FFF',
|
||||
fontColor: style.getPropertyValue('--white-1').trim(),
|
||||
fontStyle: 100,
|
||||
},
|
||||
gridLines: {
|
||||
|
|
@ -749,11 +839,17 @@ var Pontoon = (function (my) {
|
|||
var ctx = chart[0].getContext('2d');
|
||||
|
||||
var gradient_approval = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient_approval.addColorStop(0, '#FFACFC33');
|
||||
gradient_approval.addColorStop(
|
||||
0,
|
||||
style.getPropertyValue('--dark-purple-2').trim(),
|
||||
);
|
||||
gradient_approval.addColorStop(1, 'transparent');
|
||||
|
||||
var gradient_chrf = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient_chrf.addColorStop(0, '#F148FB33');
|
||||
gradient_chrf.addColorStop(
|
||||
0,
|
||||
style.getPropertyValue('--dark-purple').trim(),
|
||||
);
|
||||
gradient_chrf.addColorStop(1, 'transparent');
|
||||
|
||||
var approvedData = chart.data('approved') || [];
|
||||
|
|
@ -771,14 +867,22 @@ var Pontoon = (function (my) {
|
|||
data: chart.data('approval-rate'),
|
||||
yAxisID: 'approval-rate-y-axis',
|
||||
backgroundColor: gradient_approval,
|
||||
borderColor: ['#c6c1f0'],
|
||||
borderColor: [style.getPropertyValue('--lilac').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#c6c1f0',
|
||||
pointBackgroundColor: style.getPropertyValue('--lilac').trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#c6c1f0',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--lilac')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
spanGaps: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -787,14 +891,22 @@ var Pontoon = (function (my) {
|
|||
data: chart.data('chrf-score'),
|
||||
yAxisID: 'approval-rate-y-axis',
|
||||
backgroundColor: gradient_chrf,
|
||||
borderColor: ['#8074a8'],
|
||||
borderColor: [style.getPropertyValue('--purple').trim()],
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#8074a8',
|
||||
pointBackgroundColor: style.getPropertyValue('--purple').trim(),
|
||||
pointHitRadius: 10,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
pointHoverBackgroundColor: '#8074a8',
|
||||
pointHoverBorderColor: '#FFF',
|
||||
pointHoverBackgroundColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--purple')
|
||||
.trim(),
|
||||
pointHoverBorderColor: getComputedStyle(
|
||||
document.documentElement,
|
||||
)
|
||||
.getPropertyValue('--white-1')
|
||||
.trim(),
|
||||
spanGaps: true,
|
||||
},
|
||||
approvedData.length > 0 && {
|
||||
|
|
@ -802,8 +914,8 @@ var Pontoon = (function (my) {
|
|||
label: 'Approved',
|
||||
data: approvedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#c46487',
|
||||
hoverBackgroundColor: '#c46487',
|
||||
backgroundColor: style.getPropertyValue('--pink-2').trim(),
|
||||
hoverBackgroundColor: style.getPropertyValue('--pink-2').trim(),
|
||||
stack: 'reviewed-pretranslations',
|
||||
order: 2,
|
||||
},
|
||||
|
|
@ -812,8 +924,10 @@ var Pontoon = (function (my) {
|
|||
label: 'Rejected',
|
||||
data: rejectedData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#ffbed1',
|
||||
hoverBackgroundColor: '#ffbed1',
|
||||
backgroundColor: style.getPropertyValue('--light-pink').trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--light-pink')
|
||||
.trim(),
|
||||
stack: 'reviewed-pretranslations',
|
||||
order: 1,
|
||||
},
|
||||
|
|
@ -822,8 +936,10 @@ var Pontoon = (function (my) {
|
|||
label: 'New pretranslations',
|
||||
data: newData,
|
||||
yAxisID: 'strings-y-axis',
|
||||
backgroundColor: '#272a2f',
|
||||
hoverBackgroundColor: '#272a2f',
|
||||
backgroundColor: style.getPropertyValue('--black-3').trim(),
|
||||
hoverBackgroundColor: style
|
||||
.getPropertyValue('--black-3')
|
||||
.trim(),
|
||||
stack: 'new-pretranslations',
|
||||
order: 3,
|
||||
hidden: true,
|
||||
|
|
@ -838,7 +954,7 @@ var Pontoon = (function (my) {
|
|||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
borderColor: '#FFACFC',
|
||||
borderColor: style.getPropertyValue('--pink-3').trim(),
|
||||
borderWidth: 1,
|
||||
caretPadding: 5,
|
||||
xPadding: 10,
|
||||
|
|
@ -897,7 +1013,7 @@ var Pontoon = (function (my) {
|
|||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'APPROVAL RATE',
|
||||
fontColor: '#FFF',
|
||||
fontColor: style.getPropertyValue('--white-1').trim(),
|
||||
fontStyle: 100,
|
||||
},
|
||||
gridLines: {
|
||||
|
|
@ -919,7 +1035,7 @@ var Pontoon = (function (my) {
|
|||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'STRINGS',
|
||||
fontColor: '#FFF',
|
||||
fontColor: style.getPropertyValue('--white-1').trim(),
|
||||
fontStyle: 100,
|
||||
},
|
||||
gridLines: {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
.clipboard-success {
|
||||
float: left;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
#helpers .machinery li {
|
||||
|
|
@ -27,6 +27,6 @@
|
|||
}
|
||||
|
||||
#helpers .machinery li:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
}
|
||||
|
||||
.manual-notifications #compose h3 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 22px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.manual-notifications #compose h3 .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.manual-notifications #compose .toolbar {
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.manual-notifications #compose .errors p {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
text-transform: uppercase;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
}
|
||||
|
||||
.manual-notifications #compose .message-wrapper .subtitle {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.manual-notifications #compose textarea {
|
||||
background: #272a2f;
|
||||
color: #ebebeb;
|
||||
background: var(--black-3);
|
||||
color: var(--white-1);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
height: 150px;
|
||||
|
|
@ -81,5 +81,5 @@
|
|||
}
|
||||
|
||||
.manual-notifications #sent li.no .icon {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -362,6 +362,7 @@ GUARDIAN_RAISE_403 = True
|
|||
PIPELINE_CSS = {
|
||||
"base": {
|
||||
"source_filenames": (
|
||||
"css/dark-theme.css",
|
||||
"css/fontawesome-all.css",
|
||||
"css/nprogress.css",
|
||||
"css/boilerplate.css",
|
||||
|
|
@ -371,7 +372,7 @@ PIPELINE_CSS = {
|
|||
"output_filename": "css/base.min.css",
|
||||
},
|
||||
"translate": {
|
||||
"source_filenames": ("translate.css",),
|
||||
"source_filenames": ("translate.css", "css/dark-theme.css"),
|
||||
"output_filename": "css/translate.min.css",
|
||||
},
|
||||
"admin": {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
}
|
||||
|
||||
.sync-log .start-time a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
/** @details */
|
||||
|
|
@ -43,7 +43,7 @@ td {
|
|||
|
||||
.sync-details .detail-label {
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 12px;
|
||||
margin: 0.5em 0;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -55,7 +55,7 @@ td {
|
|||
}
|
||||
|
||||
.command-details {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.command-details .detail-item {
|
||||
|
|
@ -64,41 +64,41 @@ td {
|
|||
}
|
||||
|
||||
.command-details .start-time {
|
||||
border-color: #7bc876;
|
||||
border-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.command-details .end-time {
|
||||
border-color: #4fc4f6;
|
||||
border-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.command-details .duration {
|
||||
border-color: #fed271;
|
||||
border-color: var(--mustard-yellow);
|
||||
}
|
||||
|
||||
.project-details .start-time .detail-label,
|
||||
.repository-details .start-time .detail-label {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.project-details .end-time .detail-label,
|
||||
.repository-details .end-time .detail-label {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
}
|
||||
|
||||
.project-details .duration .detail-label,
|
||||
.repository-details .duration .detail-label {
|
||||
color: #fed271;
|
||||
color: var(--mustard-yellow);
|
||||
}
|
||||
|
||||
.project {
|
||||
border: 1px solid #5c6172;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.project .project-name {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 36px;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
|
|
@ -110,7 +110,7 @@ td {
|
|||
}
|
||||
|
||||
.repository-logs .repository-logs-column {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -121,7 +121,7 @@ td {
|
|||
}
|
||||
|
||||
.repository:nth-child(even) {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
/** @pagination */
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
}
|
||||
|
||||
#info-wrapper .read-write-info textarea {
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
#info-wrapper .read-write-info .toolbar .subtitle {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
#info-wrapper .controls .cancel {
|
||||
display: none;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
margin: 9px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/**
|
||||
* All styles are related to forms visible for the contributor.
|
||||
*/
|
||||
|
||||
form.user-locales-settings {
|
||||
width: 620px;
|
||||
}
|
||||
|
|
@ -18,7 +19,7 @@ form .locale.select.selected {
|
|||
|
||||
form .locale.select .menu {
|
||||
background: transparent;
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
margin: 2px 0 -4px -1px;
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
|
|
@ -65,7 +66,7 @@ label {
|
|||
|
||||
form a:link,
|
||||
form a:visited {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
float: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
#request-item-note p {
|
||||
font-style: italic;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -81,12 +81,12 @@
|
|||
}
|
||||
|
||||
#request-item-note p a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.request-item {
|
||||
display: none;
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
}
|
||||
|
||||
.request-item.confirmed {
|
||||
background: #fed271;
|
||||
background: var(--mustard-yellow);
|
||||
}
|
||||
|
||||
#team-form {
|
||||
|
|
@ -114,9 +114,9 @@
|
|||
}
|
||||
|
||||
#team-form .field input {
|
||||
color: #ffffff;
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
color: var(--white-1);
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
float: none;
|
||||
width: 480px;
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
|
||||
.item-list td.check,
|
||||
.item-list td.radio {
|
||||
color: #3f4752;
|
||||
color: var(--dark-grey-2);
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
height: 47px;
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
}
|
||||
|
||||
.item-list td.radio {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
}
|
||||
|
||||
.item-list td.check:before {
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
.item-list td.check:hover:before,
|
||||
.item-list td.check.enabled:before {
|
||||
content: '';
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.item-list td.check.enabled:before {
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
|
||||
.item-list td.radio:hover:before,
|
||||
.item-list td.radio.enabled:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.items.requesting-pretranslation .item-list .deadline,
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
.buglist tbody .id a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.buglist th {
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.buglist th:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.buglist th i {
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
#permissions-form h3 .remove-project:hover {
|
||||
background: #f36;
|
||||
background: var(--red-pink);
|
||||
}
|
||||
|
||||
#permissions-form h3 .remove-project .fa {
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
|
||||
#permissions-form .user.select label,
|
||||
#permissions-form .user.select label a {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
@ -144,11 +144,11 @@
|
|||
#permissions-form .user.select.managers label:hover,
|
||||
#permissions-form .user.select label a.active,
|
||||
#permissions-form .user.select label a:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
#permissions-form .user.select .menu {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
overflow: auto;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
}
|
||||
|
||||
#permissions-form .user.select .intro {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
}
|
||||
|
||||
#permissions-form #project-selector .menu {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
bottom: 28px;
|
||||
width: 287px;
|
||||
}
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
}
|
||||
|
||||
#permissions-form #project-selector .menu li {
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.locale-selector .locale.select .button.breadcrumbs {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.locale-selector .locale.select .menu {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
top: 28px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
.locale-selector .locale.select .menu li {
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
}
|
||||
|
||||
.tag-resources .rt-table {
|
||||
color: white;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.tag-resource-widget {
|
||||
background: #999;
|
||||
background: var(--taupe-2);
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
.tag-resources .ReactTable .pagination-bottom .-pageInfo {
|
||||
color: #333;
|
||||
color: var(--dark-grey-3);
|
||||
}
|
||||
|
||||
.tag-resources .rt-th {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ ul.errors {
|
|||
padding: 0.3em;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
background: #ccc;
|
||||
background: var(--light-grey-6);
|
||||
}
|
||||
|
||||
ul.errors li.error {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
}
|
||||
|
||||
#app > header {
|
||||
background: #272a2f;
|
||||
border-bottom: 1px solid #333941;
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
box-sizing: border-box;
|
||||
height: 60px;
|
||||
min-width: 700px;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
#app > .main-content > .panel-content {
|
||||
border-left: 1px solid #5e6475;
|
||||
border-left: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
width: 75%;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px #7bc876, 0 0 5px #7bc876;
|
||||
box-shadow: 0 0 10px var(--light-green-1), 0 0 5px var(--light-green-1);
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ button {
|
|||
}
|
||||
|
||||
body {
|
||||
background: #272a2f;
|
||||
color: #ebebeb;
|
||||
background: var(--black-3);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
body,
|
||||
|
|
@ -27,14 +27,14 @@ html,
|
|||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
}
|
||||
|
||||
.addon-promotion {
|
||||
background: #272a2f;
|
||||
border-bottom: 1px solid #333941;
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--dark-grey-1);
|
||||
height: 44px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.addon-promotion .container {
|
||||
align-items: center;
|
||||
background: #ff3366cc;
|
||||
background: var(--pink);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
.addon-promotion .dismiss {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 28px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.addon-promotion .dismiss:hover {
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
}
|
||||
|
||||
.addon-promotion .text {
|
||||
|
|
@ -37,14 +37,14 @@
|
|||
}
|
||||
|
||||
.addon-promotion .get {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
border-radius: 3px;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
.addon-promotion .get:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
}
|
||||
|
||||
.batch-actions .topbar {
|
||||
background: #4d5967;
|
||||
border-bottom: 1px solid #5e6475;
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
padding: 12px 10px 13px;
|
||||
}
|
||||
|
||||
.batch-actions .topbar .selecting {
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
@ -18,13 +18,13 @@
|
|||
.batch-actions .topbar button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.batch-actions .topbar button:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.batch-actions .topbar button.select-all {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.batch-actions .topbar button.selected-count .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.batch-actions .topbar button .fa {
|
||||
|
|
@ -64,19 +64,19 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel h2 {
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel .intro p {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel .intro p .stress {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel button,
|
||||
|
|
@ -86,10 +86,10 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel button {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
font-weight: 600;
|
||||
margin-top: 10px;
|
||||
padding: 15px 5px;
|
||||
|
|
@ -104,14 +104,14 @@
|
|||
}
|
||||
|
||||
.batch-actions .actions-panel button.reject-all {
|
||||
background: #f36;
|
||||
background: var(--red-pink);
|
||||
}
|
||||
|
||||
.batch-actions .actions-panel input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid #5e6475;
|
||||
color: #ffffff;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
color: var(--white-1);
|
||||
float: none;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 0 5px;
|
||||
|
|
@ -129,5 +129,5 @@
|
|||
|
||||
/* Style placeholder color in Chrome */
|
||||
.batch-actions .actions-panel input::-webkit-input-placeholder {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
}
|
||||
|
||||
.comments-list .add-comment .comment-editor {
|
||||
background-color: #333941;
|
||||
background-color: var(--dark-grey-1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
display: flex;
|
||||
flex-grow: 2;
|
||||
font-size: 11px;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
}
|
||||
|
||||
.comments-list .add-comment .comment-editor .mention-element {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.comments-mention-list {
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
padding: 10px 12px;
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.comments-mention-list .mention {
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
.comments-mention-list .mention:hover,
|
||||
.comments-mention-list .active-mention {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.comments-mention-list .mention .user-avatar {
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
.comments-mention-list .mention .user-avatar img {
|
||||
border-radius: 2px;
|
||||
border: 1px solid #5e6475;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -64,10 +64,10 @@
|
|||
}
|
||||
|
||||
.comments-list .add-comment .submit-button {
|
||||
background-color: #4d5967;
|
||||
border: solid 1px #4d5967;
|
||||
background-color: var(--grey-3);
|
||||
border: solid 1px var(--grey-3);
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -78,8 +78,8 @@
|
|||
}
|
||||
|
||||
.comments-list .add-comment .submit-button:hover:not(:disabled) {
|
||||
color: #272a2f;
|
||||
background: #7bc876;
|
||||
color: var(--black-3);
|
||||
background: var(--light-green-1);
|
||||
}
|
||||
|
||||
.comments-list .add-comment .submit-button:disabled {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.comments-list .comment a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
.container
|
||||
.content
|
||||
a[href^='/contributors/']:not(.comment-author) {
|
||||
background-color: #3f4752;
|
||||
background-color: var(--dark-grey-2);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
}
|
||||
|
||||
.comments-list .comment .content {
|
||||
background-color: #4d5967;
|
||||
border: solid 1px #4d5967;
|
||||
background-color: var(--grey-3);
|
||||
border: solid 1px var(--grey-3);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
font-size: 11px;
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
.comments-list .comment .content p,
|
||||
.comments-list .comment .content span {
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
.comments-list .comment .content p:first-child {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.comments-list .comment .info {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
margin-top: -2px;
|
||||
|
|
@ -58,18 +58,18 @@
|
|||
.comments-list .comment .info .pin-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.comments-list .comment .info .pin-button:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.comments-list .comment .comment-pin {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 9px;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
}
|
||||
|
||||
.comments-list .pinned-comments .title {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 100;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.comments-list .pinned-comments ul {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.comments-list .comment .user-avatar img {
|
||||
border-radius: 4px;
|
||||
border: 2px solid #5e6475;
|
||||
border: 2px solid var(--light-grey-1);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
}
|
||||
|
||||
.translation p ins {
|
||||
background: #4b6259;
|
||||
color: #9cd699;
|
||||
background: var(--forest-green-2);
|
||||
color: var(--light-green-3);
|
||||
}
|
||||
|
||||
.translation p del {
|
||||
background: #674b54;
|
||||
color: #fe8f8f;
|
||||
background: var(--purple-pink);
|
||||
color: var(--coral);
|
||||
}
|
||||
|
||||
.translation p ins mark,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.editor {
|
||||
background: rgb(39, 42, 47);
|
||||
border-bottom: 1px solid #5e6475;
|
||||
background: var(--black-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.editor-menu {
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
.editor-menu .actions button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
height: 40px;
|
||||
margin: 0 2px;
|
||||
padding: 10px 3px;
|
||||
}
|
||||
|
||||
.editor-menu .actions button:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.editor-menu .actions button .fa {
|
||||
|
|
@ -28,22 +28,22 @@
|
|||
.editor-menu .actions .action-approve,
|
||||
.editor-menu .actions .action-save,
|
||||
.editor-menu .actions .action-suggest {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
border-radius: 3px;
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.editor-menu .actions .action-suggest {
|
||||
background: #4fc4f6;
|
||||
background: var(--light-blue);
|
||||
}
|
||||
|
||||
.editor-menu .actions .action-approve:hover,
|
||||
.editor-menu .actions .action-save:hover,
|
||||
.editor-menu .actions .action-suggest:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.editor-menu .banner {
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
.editor-menu .banner button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-style: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@
|
|||
|
||||
.editor-settings .selector {
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 22px;
|
||||
padding: 9px 5px 9px 0;
|
||||
}
|
||||
|
||||
.editor-settings .selector:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.editor-settings .menu {
|
||||
background-color: #272a2f;
|
||||
background-color: var(--black-3);
|
||||
bottom: auto;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
max-height: 318px;
|
||||
|
|
@ -31,24 +31,24 @@
|
|||
}
|
||||
|
||||
.editor-settings .menu li {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
font-weight: 300;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.editor-settings .menu li:hover {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.editor-settings .menu li:hover,
|
||||
.editor-settings .menu li:hover a,
|
||||
.editor-settings .menu li:active a {
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.editor-settings .menu .horizontal-separator {
|
||||
border-top: 1px solid #525a65;
|
||||
border-top: 1px solid var(--grey-2);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
@ -59,11 +59,11 @@
|
|||
}
|
||||
|
||||
.editor-settings .menu .check-box .fa:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.editor-settings .menu .check-box.enabled .fa:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
content: '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.failed-checks {
|
||||
background: #272a2f;
|
||||
border-top: 1px solid #5e6475;
|
||||
background: var(--black-3);
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
.failed-checks .close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
font-weight: 100;
|
||||
|
|
@ -26,11 +26,11 @@
|
|||
}
|
||||
|
||||
.failed-checks .close:hover {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.failed-checks .title {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -54,23 +54,23 @@
|
|||
}
|
||||
|
||||
.failed-checks .warning {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.failed-checks .error:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.failed-checks .warning:before {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
}
|
||||
|
||||
.failed-checks .anyway {
|
||||
background: #7bc876;
|
||||
background: var(--light-green-1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
bottom: 10px;
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
|
|
@ -79,9 +79,9 @@
|
|||
}
|
||||
|
||||
.failed-checks .anyway.suggest {
|
||||
background: #4fc4f6;
|
||||
background: var(--light-blue);
|
||||
}
|
||||
|
||||
.failed-checks .anyway:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.editor .ftl {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
.editor .ftl.active,
|
||||
.editor .ftl:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.editor .ftl.error {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.keyboard-shortcuts {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
}
|
||||
|
||||
.keyboard-shortcuts .overlay {
|
||||
background: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
font-size: 13px;
|
||||
width: 400px;
|
||||
height: 435px;
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
}
|
||||
|
||||
.keyboard-shortcuts .overlay span {
|
||||
background: #3f4752;
|
||||
border: 1px solid #5e6475;
|
||||
background: var(--dark-grey-2);
|
||||
border: 1px solid var(--light-grey-1);
|
||||
border-radius: 2px;
|
||||
font-weight: 300;
|
||||
margin: 0 4px;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.tm-source {
|
||||
font-size: 11px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid #5e6475;
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background: #4d5967;
|
||||
color: #ccc;
|
||||
background: var(--grey-3);
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
.tm-source .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.new-contributor-tooltip {
|
||||
background: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 20px #000b;
|
||||
box-shadow: 0 0 20px var(--black-5);
|
||||
box-sizing: border-box;
|
||||
margin: -20px auto;
|
||||
padding: 20px;
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.new-contributor-tooltip p {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 20px;
|
||||
|
|
@ -30,5 +30,5 @@
|
|||
}
|
||||
|
||||
.new-contributor-tooltip p a {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.translation-length {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
float: left;
|
||||
line-height: 22px;
|
||||
padding: 9px 5px;
|
||||
}
|
||||
|
||||
.translation-length .countdown .overflow {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.entities {
|
||||
background-color: #3f4752;
|
||||
background-color: var(--dark-grey-2);
|
||||
height: calc(100% - 53px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
|
||||
.entities .no-results {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 28px;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.entities .no-results div {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
display: block;
|
||||
font-size: 128px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.entity {
|
||||
color: white;
|
||||
color: var(--white-1);
|
||||
cursor: pointer;
|
||||
line-height: 2rem;
|
||||
padding: 10px 25px 10px 43px;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
.entity.selected,
|
||||
.entity.sibling:hover,
|
||||
.entity:hover {
|
||||
background-color: #333941;
|
||||
background-color: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.entity > div {
|
||||
|
|
@ -23,10 +23,10 @@
|
|||
}
|
||||
|
||||
.entity mark.search {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
background: #676054;
|
||||
background: var(--brown-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
|
||||
.entity .translation-string {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
min-height: 20px;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
}
|
||||
|
||||
.entity .status:before {
|
||||
color: #5f7285;
|
||||
color: var(--blue-2);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -80,27 +80,27 @@
|
|||
}
|
||||
|
||||
.entity.approved .status:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.entity.pretranslated .status:before {
|
||||
color: #c0ff00;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.entity.errors .status:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.entity.warnings .status:before {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
}
|
||||
|
||||
.entity.sibling {
|
||||
background-color: #4d5967;
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
|
||||
.entity .sibling-entities-icon {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
left: 17px;
|
||||
top: 39px;
|
||||
position: absolute;
|
||||
|
|
@ -110,5 +110,5 @@
|
|||
}
|
||||
|
||||
.entity .sibling-entities-icon:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.metadata .source-string-comment .context-issue-button {
|
||||
background: #333941;
|
||||
border: 1px solid #3f4752;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--dark-grey-2);
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
|
|
@ -12,5 +12,5 @@
|
|||
}
|
||||
|
||||
.metadata .source-string-comment .context-issue-button:hover {
|
||||
border-color: #637283;
|
||||
border-color: var(--grey-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.entity-details {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -16,6 +16,6 @@
|
|||
|
||||
.entity-details .third-column {
|
||||
width: 33.33%;
|
||||
border-left: 1px solid #5e6475;
|
||||
border-left: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.entity-navigation {
|
||||
background: #4d5967;
|
||||
border-bottom: 1px solid #5e6475;
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
padding: 12px 10px 13px;
|
||||
}
|
||||
|
||||
.entity-navigation button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
|
||||
.entity-navigation button:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.entity-navigation button:disabled {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.third-column .top {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
height: calc(40% + 21px);
|
||||
min-height: 200px;
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
}
|
||||
|
||||
.react-tabs__tab {
|
||||
background: #4d5967;
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-right: 1px solid #5e6475;
|
||||
background: var(--grey-3);
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
border-right: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
font-weight: 300;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
.react-tabs__tab--selected {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
@ -61,19 +61,19 @@
|
|||
|
||||
/* Other tools styles */
|
||||
.react-tabs span.count {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
border-radius: 3px;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
font-weight: 300;
|
||||
margin-left: 3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.react-tabs .react-tabs__tab--selected span.count {
|
||||
background: #4d5967;
|
||||
background: var(--grey-3);
|
||||
}
|
||||
|
||||
.react-tabs span.count .preferred,
|
||||
.react-tabs span.count .pinned {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.metadata {
|
||||
background-color: #3f4752;
|
||||
color: #aaa;
|
||||
background-color: var(--dark-grey-2);
|
||||
color: var(--light-grey-7);
|
||||
font-size: 12px;
|
||||
font-style: italic;
|
||||
min-height: 114px;
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
}
|
||||
|
||||
.metadata .title {
|
||||
color: #888;
|
||||
color: var(--light-grey-2);
|
||||
}
|
||||
|
||||
.metadata div a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.metadata .original .term {
|
||||
background: inherit;
|
||||
border-bottom: 1px solid #7bc876;
|
||||
border-bottom: 1px solid var(--light-green-1);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
.metadata button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-style: italic;
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
}
|
||||
|
||||
.metadata .context a {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.metadata .context a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
.screenshots img {
|
||||
border: 1px solid #5e6475;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
cursor: zoom-in;
|
||||
max-height: 100px;
|
||||
max-width: 150px;
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.lightbox {
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
background-color: var(--black-4);
|
||||
cursor: zoom-out;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.history > p {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.history .wrapper {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
}
|
||||
|
||||
.history .translation {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.history .translation:not(.cannot-copy):hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.history .translation .user-avatar {
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
|
||||
.history .translation .user-avatar img {
|
||||
border-radius: 6px;
|
||||
border: 2px solid #5e6475;
|
||||
border: 2px solid var(--light-grey-1);
|
||||
}
|
||||
|
||||
.history .translation:hover .user-avatar img {
|
||||
border-color: #637283;
|
||||
border-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.history .translation .content {
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -68,12 +68,12 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header .info a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.history .translation .content > header .toggle {
|
||||
background: #333941;
|
||||
border: 1px solid #3f4752;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--dark-grey-2);
|
||||
border-radius: 4px;
|
||||
font-size: inherit;
|
||||
font-weight: 100;
|
||||
|
|
@ -83,25 +83,25 @@
|
|||
}
|
||||
|
||||
.history .translation .content > header .toggle.on {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.history .translation:hover .content > header .toggle {
|
||||
border-color: #4d5967;
|
||||
border-color: var(--grey-3);
|
||||
}
|
||||
|
||||
.history .translation .content > header .toggle:hover {
|
||||
border-color: #637283;
|
||||
border-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.history .translation .content > header .toggle.active .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.history .translation .content > header button {
|
||||
background: no-repeat transparent;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
|
|
@ -136,11 +136,11 @@
|
|||
}
|
||||
|
||||
.history .translation.pretranslated .content > header button.approve:before {
|
||||
color: #c0ff00;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.history .translation.fuzzy .content > header button.approve:before {
|
||||
color: #fed271;
|
||||
color: var(--mustard-yellow);
|
||||
}
|
||||
|
||||
.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: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.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: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.history .translation:not(.can-reject) .content > header button.reject:before,
|
||||
|
|
@ -204,14 +204,14 @@
|
|||
}
|
||||
|
||||
.translation .content > header button.delete:hover:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.machinery-sources {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#___reactour .interactive-tour {
|
||||
color: #2d2323;
|
||||
color: var(--black-brown);
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
}
|
||||
|
||||
.interactive-tour p a {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.skeleton-loader p {
|
||||
height: 0.8125rem;
|
||||
background-color: #e2e2e2;
|
||||
background-color: var(--white-5);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.wave-loader .animation {
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
background-color: #7bc876;
|
||||
background-color: var(--light-green-1);
|
||||
|
||||
-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: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
font-weight: normal;
|
||||
font-style: inherit;
|
||||
background: #676054;
|
||||
background: var(--brown-1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
.machinery > .search-wrapper > label {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: text;
|
||||
font-size: 17px;
|
||||
left: auto;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
.machinery > .search-wrapper > label > button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
}
|
||||
|
||||
.machinery > .search-wrapper input[type='search'] {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 23px;
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
/* Style placeholder color in Chrome */
|
||||
.machinery > .search-wrapper input[type='search']::-webkit-input-placeholder {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.machinery .load-more-container {
|
||||
|
|
@ -77,10 +77,10 @@
|
|||
}
|
||||
|
||||
.machinery .load-more-button {
|
||||
background: #333941;
|
||||
border: 1px solid #3f4752;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--dark-grey-2);
|
||||
border-radius: 4px;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 100;
|
||||
margin-right: 6px;
|
||||
|
|
@ -89,5 +89,5 @@
|
|||
}
|
||||
|
||||
.machinery .load-more-button:hover {
|
||||
border-color: #637283;
|
||||
border-color: var(--grey-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.machinery .translation {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
|
||||
.machinery .translation:not(.cannot-copy):hover,
|
||||
.machinery .translation.selected {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.machinery .translation > header {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -46,13 +46,13 @@
|
|||
|
||||
.machinery .translation > header .quality::after {
|
||||
content: '•';
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.machinery .translation > header .quality,
|
||||
.machinery .translation > header sup {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.machinery .translation > header .projects {
|
||||
|
|
@ -69,5 +69,5 @@
|
|||
}
|
||||
|
||||
.machinery .translation p.original {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.navigation > ul > li + li::before {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
content: '/';
|
||||
font-size: 28px;
|
||||
font-weight: 100;
|
||||
|
|
@ -17,13 +17,13 @@
|
|||
}
|
||||
|
||||
.navigation > ul > li > a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-weight: 300;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.navigation > ul > li > a:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.navigation img {
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
}
|
||||
|
||||
.navigation .locale-code {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.notification-panel {
|
||||
background: rgba(51, 57, 65, 0.9);
|
||||
background: var(--grey-7);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
|
|
@ -17,11 +17,11 @@
|
|||
|
||||
.notification-panel .info,
|
||||
.notification-panel .success {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.notification-panel .error {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
/* Showing and hiding animations. */
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
|
||||
.fluent-rich-string label {
|
||||
background: transparent;
|
||||
border: 1px solid #5e6475;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 2px 5px 2px 0;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
.fluent-rich-string label > :not(:last-child)::after {
|
||||
content: '·';
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.terms-popup {
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
font-style: normal;
|
||||
max-width: 500px;
|
||||
position: absolute;
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.terms-popup .terms-list .term:not(.cannot-copy):hover {
|
||||
background-color: #3f4752;
|
||||
background-color: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.terms-popup li.term:last-child {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.other-locales .translation {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.other-locales ul.preferred-list .translation:last-child {
|
||||
border-bottom-color: #7bc876;
|
||||
border-bottom-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.other-locales .translation.cannot-copy {
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
|
||||
.other-locales .translation:not(.cannot-copy):hover,
|
||||
.other-locales .translation.selected {
|
||||
background: #333941;
|
||||
border-color: #5e6475;
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--light-grey-1);
|
||||
}
|
||||
|
||||
.other-locales .translation > header {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
|
||||
.other-locales .translation > header span {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.other-locales > p {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
mark.placeable {
|
||||
background: #4d5967;
|
||||
border: 1px solid #5e6475;
|
||||
background: var(--grey-3);
|
||||
border: 1px solid var(--light-grey-1);
|
||||
border-radius: 2px;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
margin: 0 1px;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
}
|
||||
|
||||
.project-menu .menu li a:hover {
|
||||
background: #3f4752;
|
||||
color: #fff;
|
||||
background: var(--dark-grey-2);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.project-menu .menu li a .project {
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .percent {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,19 +21,19 @@
|
|||
}
|
||||
|
||||
.project-menu.closed .selector:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.project-menu .selector .icon {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.project-menu .menu {
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-top: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
line-height: 1.231em;
|
||||
list-style: none;
|
||||
padding: 10px 12px;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .search-wrapper .icon {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .search-wrapper input[type='search'] {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
padding: 4px 3px 3px 25px;
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
|
|
@ -93,17 +93,17 @@
|
|||
}
|
||||
|
||||
.project-menu .menu .static-links {
|
||||
border-top: 1px solid #5e6475;
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.project-menu .menu .current a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.project-menu .menu .header {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
padding: 5px 4px;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
}
|
||||
|
||||
.project-info .panel {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
bottom: auto;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
padding: 10px 12px;
|
||||
position: absolute;
|
||||
top: 59px;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.project-info .panel h2 {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -36,5 +36,5 @@
|
|||
}
|
||||
|
||||
.project-info .panel a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu li a:hover {
|
||||
background: #3f4752;
|
||||
color: #fff;
|
||||
background: var(--dark-grey-2);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.resource-menu .menu li a .path {
|
||||
|
|
|
|||
|
|
@ -21,19 +21,19 @@
|
|||
}
|
||||
|
||||
.resource-menu.closed .selector:hover {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.resource-menu .selector .icon {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.resource-menu .menu {
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-top: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
line-height: 1.231em;
|
||||
list-style: none;
|
||||
padding: 10px 12px;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu .search-wrapper .icon {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 1.2em;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
|
|
@ -59,10 +59,10 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu .search-wrapper input[type='search'] {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
padding: 4px 3px 3px 25px;
|
||||
background: #333941;
|
||||
border: 1px solid #4d5967;
|
||||
background: var(--dark-grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 3px;
|
||||
font-weight: 300;
|
||||
height: 28px;
|
||||
|
|
@ -93,17 +93,17 @@
|
|||
}
|
||||
|
||||
.resource-menu .menu .static-links {
|
||||
border-top: 1px solid #5e6475;
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.resource-menu .menu .current a {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.resource-menu .menu .header {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
padding: 5px 4px;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.resource-menu .menu .percent {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
}
|
||||
|
||||
.progress-chart:hover .selector canvas {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.progress-chart .menu canvas {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
.progress-chart .percent:after {
|
||||
content: '%';
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
left: 50%;
|
||||
line-height: 18px;
|
||||
margin-left: -200px; /* Must be half the width */
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu header h2 {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu header h2 .value {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 28px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu .percent {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 90px;
|
||||
line-height: 100px;
|
||||
top: 140px;
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
|
||||
.progress-chart .menu .details div {
|
||||
border-top: 5px solid;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: inline-block;
|
||||
margin-right: 1px;
|
||||
width: 79px;
|
||||
|
|
@ -105,23 +105,23 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu .details div.approved {
|
||||
border-color: #7bc876;
|
||||
border-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.pretranslated {
|
||||
border-color: #c0ff00;
|
||||
border-color: var(--neon-green);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.warnings {
|
||||
border-color: #ffa10f;
|
||||
border-color: var(--orange-1);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.errors {
|
||||
border-color: #f36;
|
||||
border-color: var(--red-pink);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div.missing {
|
||||
border-color: #5f7285;
|
||||
border-color: var(--blue-2);
|
||||
}
|
||||
|
||||
.progress-chart .menu .details div .title {
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
}
|
||||
|
||||
.progress-chart .menu .details div .value {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
padding: 5px 0 10px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .visibility-switch {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
|
|
@ -30,14 +30,14 @@
|
|||
}
|
||||
|
||||
.filters-panel .visibility-switch:hover .status:before {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.filters-panel .menu {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
bottom: auto;
|
||||
box-sizing: border-box;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
left: 5px;
|
||||
list-style: none;
|
||||
|
|
@ -60,15 +60,15 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
font-weight: 300;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.filters-panel .menu li:hover {
|
||||
color: #ffffff;
|
||||
background-color: #3f4752;
|
||||
color: var(--white-1);
|
||||
background-color: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.filters-panel .menu li .status {
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
.filters-panel .menu li.horizontal-separator {
|
||||
background: transparent;
|
||||
border-top: none;
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
cursor: default;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
|
|
@ -122,16 +122,16 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li .count {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
border-radius: 3px;
|
||||
color: #cccccc;
|
||||
color: var(--light-grey-6);
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.filters-panel .menu li:hover .count {
|
||||
background: #4d5967;
|
||||
color: #cccccc;
|
||||
background: var(--grey-3);
|
||||
color: var(--light-grey-6);
|
||||
}
|
||||
|
||||
.filters-panel .menu li .priority {
|
||||
|
|
@ -140,12 +140,12 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li .priority .fa-star {
|
||||
color: #637283;
|
||||
color: var(--grey-1);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.filters-panel .menu li .priority .fa-star.active {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.filters-panel
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
|
||||
.filters-panel .menu li.author img {
|
||||
border-radius: 6px;
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
@ -181,13 +181,13 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.author .name {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
font-size: 16px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.filters-panel .menu li.author .role {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.author .count {
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.author .status:before {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.author.selected .status,
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
background: #111111;
|
||||
border-top: 1px solid #5e6475;
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
line-height: 23px;
|
||||
padding: 10px 12px;
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
.filters-panel .toolbar button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
|
@ -259,5 +259,5 @@
|
|||
.filters-panel .toolbar .clear-selection:hover,
|
||||
.filters-panel .toolbar .apply-selected:hover,
|
||||
.filters-panel .toolbar .apply-selected .applied-count {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
}
|
||||
|
||||
.search-box input[type='search'] {
|
||||
background: #333941;
|
||||
background: var(--dark-grey-1);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 23px;
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
|
||||
/* Style placeholder color in Chrome */
|
||||
.search-box input[type='search']::-webkit-input-placeholder {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.search-box > label {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: text;
|
||||
font-size: 17px;
|
||||
left: auto;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.search-box .status.fa::before {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
content: '';
|
||||
}
|
||||
|
||||
|
|
@ -63,27 +63,27 @@
|
|||
}
|
||||
|
||||
.search-box .translated .status:before {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.search-box .pretranslated .status:before {
|
||||
color: #c0ff00;
|
||||
color: var(--neon-green);
|
||||
}
|
||||
|
||||
.search-box .warnings .status:before {
|
||||
color: #ffa10f;
|
||||
color: var(--orange-1);
|
||||
}
|
||||
|
||||
.search-box .errors .status:before {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.search-box .missing .status:before {
|
||||
color: #5f7285;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.search-box .unreviewed .status:before {
|
||||
color: #4fc4f6;
|
||||
color: var(--light-blue);
|
||||
content: '';
|
||||
font-size: 18px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.filters-panel .menu li.for-time-range button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
margin: -3px 4px 0 0;
|
||||
|
|
@ -9,11 +9,11 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu .for-time-range button.save-range {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.for-time-range button:hover {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.for-time-range button .fa {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.time-range label {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-sizing: border-box;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.time-range.editing input {
|
||||
border-color: #525a65;
|
||||
border-color: var(--grey-2);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.filters-panel .menu li.time-range input.error {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
}
|
||||
|
||||
.filters-panel .menu li.time-range .to input {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
}
|
||||
|
||||
.no-team-comments {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
line-height: 22px;
|
||||
padding: 15px 10px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.terms-list .term {
|
||||
border-bottom: 1px solid #5e6475;
|
||||
border-bottom: 1px solid var(--light-grey-1);
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -9,16 +9,16 @@
|
|||
}
|
||||
|
||||
.terms-list .term:not(.cannot-copy):hover {
|
||||
background: #333941;
|
||||
border-color: #5e6475;
|
||||
background: var(--dark-grey-1);
|
||||
border-color: var(--light-grey-1);
|
||||
}
|
||||
|
||||
.terms-list .term .text {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.terms-list .term .part-of-speech {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
padding-left: 3px;
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.terms-list .term .translate {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
|
|
@ -40,17 +40,17 @@
|
|||
}
|
||||
|
||||
.terms-list .term .translation {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.terms-list .term .details {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
padding: 5px 0 0 15px;
|
||||
}
|
||||
|
||||
.terms-list .term .usage .title {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 11px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.no-terms {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-style: italic;
|
||||
line-height: 22px;
|
||||
padding: 15px 10px;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
}
|
||||
|
||||
.plural-selector ul li {
|
||||
background: #4d5967;
|
||||
border: 1px solid #5e6475;
|
||||
background: var(--grey-3);
|
||||
border: 1px solid var(--light-grey-1);
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
display: table-cell;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
.plural-selector ul li.active,
|
||||
.plural-selector ul li:hover {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.plural-selector ul li.active {
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.plural-selector ul li button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
color: var(--light-grey-6);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
.plural-selector ul li button sup {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
padding-left: 1px;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
|
||||
.translationform label {
|
||||
background: transparent;
|
||||
border: 1px solid #5e6475;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
box-sizing: border-box;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 2px 5px 2px 0;
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
|
||||
.translationform label > :not(:last-child)::after {
|
||||
content: '·';
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.translationform label .stress {
|
||||
color: #7bc876;
|
||||
color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.translationform .accesskey-input {
|
||||
|
|
@ -58,9 +58,9 @@
|
|||
}
|
||||
|
||||
.translationform .accesskeys .key {
|
||||
border: 1px solid #5e6475;
|
||||
background: #4d5967;
|
||||
color: #ebebeb;
|
||||
border: 1px solid var(--light-grey-1);
|
||||
background: var(--grey-3);
|
||||
color: var(--white-1);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
|
||||
.translationform .accesskeys .key.active,
|
||||
.translationform .accesskeys .key:hover:not(:disabled) {
|
||||
border-color: #7bc876;
|
||||
border-color: var(--light-green-1);
|
||||
}
|
||||
|
||||
.translationform .accesskeys .key:disabled {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
.cm-editor {
|
||||
background: white;
|
||||
color: #444;
|
||||
color: var(--dark-grey-4);
|
||||
font-size: 14px;
|
||||
padding: 6px 8px 6px 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.unsaved-changes {
|
||||
background: #272a2f;
|
||||
border-top: 1px solid #5e6475;
|
||||
background: var(--black-3);
|
||||
border-top: 1px solid var(--light-grey-1);
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
.unsaved-changes .close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
font-weight: 100;
|
||||
|
|
@ -26,11 +26,11 @@
|
|||
}
|
||||
|
||||
.unsaved-changes .close:hover {
|
||||
color: #ffffff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.unsaved-changes .title {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
}
|
||||
|
||||
.unsaved-changes .anyway {
|
||||
background: #ff0a43;
|
||||
background: var(--red);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
bottom: 10px;
|
||||
color: #272a2f;
|
||||
color: var(--black-3);
|
||||
font-weight: 600;
|
||||
margin-left: 10px;
|
||||
padding: 10px;
|
||||
|
|
@ -54,5 +54,5 @@
|
|||
}
|
||||
|
||||
.unsaved-changes .anyway:hover {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.user-signin button {
|
||||
background: transparent;
|
||||
border: 1.5px solid #7bc176;
|
||||
border: 1.5px solid var(--light-green-2);
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
|
|
@ -16,5 +16,5 @@
|
|||
}
|
||||
|
||||
.user-signin button:hover {
|
||||
background-color: #7bc176;
|
||||
background-color: var(--light-green-2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.user-menu .selector img,
|
||||
.user-menu .selector .menu-icon,
|
||||
.user-menu .menu li.details img {
|
||||
border: 2px solid #4d5967;
|
||||
border: 2px solid var(--grey-3);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
}
|
||||
|
||||
.user-menu .menu {
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
list-style: none;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.user-menu .menu li {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
|
|
@ -59,12 +59,12 @@
|
|||
}
|
||||
|
||||
.user-menu .menu li.details .name {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-menu .menu li.details .email {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
.user-menu li button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-weight: 300;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
|
@ -90,18 +90,18 @@
|
|||
}
|
||||
|
||||
.user-menu .menu li:hover {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.user-menu .menu li:hover,
|
||||
.user-menu .menu li:hover a,
|
||||
.user-menu .menu li:hover button,
|
||||
.user-menu .menu li:active a {
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.user-menu .menu .horizontal-separator {
|
||||
border-top: 1px solid #525a65;
|
||||
border-top: 1px solid var(--grey-2);
|
||||
height: 0;
|
||||
margin: 5px 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
.user-notification {
|
||||
border-top: 1px solid #333941;
|
||||
border-top: 1px solid var(--dark-grey-1);
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user-notification:first-child {
|
||||
border-color: #272a2f;
|
||||
border-color: var(--black-3);
|
||||
}
|
||||
|
||||
.user-notification:first-child:hover {
|
||||
border-color: #333941;
|
||||
border-color: var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.user-notification.unread {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.user-notification.read {
|
||||
|
|
@ -23,11 +23,11 @@
|
|||
|
||||
@keyframes fadeout-background {
|
||||
0% {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: #272a2f;
|
||||
background: var(--black-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,17 +37,17 @@
|
|||
}
|
||||
|
||||
.user-notification span {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.user-notification a {
|
||||
color: #f36;
|
||||
color: var(--red-pink);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.user-notification .verb {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
.user-notification .message.trim,
|
||||
.user-notification .message.trim p {
|
||||
pointer-events: none;
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -73,11 +73,11 @@
|
|||
.user-notification .item-content:hover .message,
|
||||
.user-notification .item-content:hover .message.trim p,
|
||||
.user-notification .item-content:hover .message.trim a {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
||||
.user-notification .message.trim a {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
}
|
||||
|
||||
.user-notification .message.trim p {
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
.user-notification .message h4,
|
||||
.user-notification .message h5,
|
||||
.user-notification .message h6 {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
/* End message styling */
|
||||
|
||||
.user-notification .timeago {
|
||||
color: #888888;
|
||||
color: var(--light-grey-2);
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .selector .icon {
|
||||
color: #4d5967;
|
||||
color: var(--grey-3);
|
||||
font-size: 26px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.user-notifications-menu .selector .badge {
|
||||
background: #f36;
|
||||
border: 3px solid #272a2f;
|
||||
background: var(--red-pink);
|
||||
border: 3px solid var(--black-3);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
color: var(--white-1);
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
|
|
@ -35,8 +35,8 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu {
|
||||
background-color: #272a2f;
|
||||
border: 1px solid #333941;
|
||||
background-color: var(--black-3);
|
||||
border: 1px solid var(--dark-grey-1);
|
||||
border-top: none;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu li {
|
||||
color: #aaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu li:hover {
|
||||
background: #3f4752;
|
||||
background: var(--dark-grey-2);
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu li.no {
|
||||
|
|
@ -71,24 +71,24 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu li.no .icon {
|
||||
color: #333941;
|
||||
color: var(--dark-grey-1);
|
||||
font-size: 92px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu li.no .title {
|
||||
color: #ebebeb;
|
||||
color: var(--white-1);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu li.no .description {
|
||||
color: #aaaaaa;
|
||||
color: var(--light-grey-7);
|
||||
font-size: 12px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu .see-all {
|
||||
border-top: 1px solid #333941;
|
||||
border-top: 1px solid var(--dark-grey-1);
|
||||
}
|
||||
|
||||
.user-notifications-menu .menu .see-all a {
|
||||
|
|
@ -99,6 +99,6 @@
|
|||
}
|
||||
|
||||
.user-notifications-menu .menu .see-all a:hover {
|
||||
background: #3f4752;
|
||||
color: #ffffff;
|
||||
background: var(--dark-grey-2);
|
||||
color: var(--white-1);
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче