mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1543348 - Create generic button background variables; r=rcaliman 

Differential Revision: https://phabricator.services.mozilla.com/D26880

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Florens Verschelde 2019-04-11 16:23:47 +00:00
Родитель a4a901bb22
Коммит e248e2626b
2 изменённых файлов: 29 добавлений и 31 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

48
devtools/client/themes/changes.css
Просмотреть файл

@ -2,31 +2,23 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* CSS Variables specific to the Changes panel that aren't defined by the themes */
:root {
--changes-button-copy-all-background-color--hover: var(--grey-90-a05);
--changes-button-copy-all-background-color--active: var(--grey-90-a10);
--changes-button-copy-rule-background-color: var(--grey-90-a05);
--changes-button-copy-rule-background-color--active: var(--grey-90-a10);
--diff-add-background-color: #f1feec;
--diff-add-text-color: #54983f;
--diff-remove-background-color: #fbf2f5;
--diff-remove-text-color: #bf7173;
--diff-source-background: var(--theme-toolbar-background);
--diff-level: 0;
--diff-level-offset: 10px;
/*
/* CSS Variables specific to the Changes panel that aren't defined by the themes */
:root {
--diff-add-background-color: #f1feec;
--diff-add-text-color: #54983f;
--diff-remove-background-color: #fbf2f5;
--diff-remove-text-color: #bf7173;
--diff-source-background: var(--theme-toolbar-background);
--diff-level: 0;
--diff-level-offset: 10px;
/*
Minimum padding so content on the first level (zero) isn't touching the edge. Added
and removed lines will re-declare this to add extra padding to clear the +/- icons.
*/
--diff-level-min-offset: 5px;
}
*/
--diff-level-min-offset: 5px;
}
:root.theme-dark {
--changes-button-copy-all-background-color--hover: var(--grey-10-a10);
--changes-button-copy-all-background-color--active: var(--grey-10-a15);
--changes-button-copy-rule-background-color: var(--grey-10-a10);
--changes-button-copy-rule-background-color--active: var(--grey-10-a15);
--diff-add-background-color: rgba(18, 188, 0, 0.15);
--diff-add-text-color: #12BC00;
--diff-remove-background-color: rgba(255, 0, 57, 0.15);
@ -87,7 +79,8 @@
.changes__copy-all-changes-button {
-moz-context-properties: fill;
background: url(chrome://devtools/skin/images/copy.svg) no-repeat;
/* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */
background: url(chrome://browser/skin/edit-copy.svg) no-repeat;
background-position: 4px 3px;
background-size: 16px;
border: none;
@ -98,12 +91,13 @@
padding: 4px 5px 4px 25px;
}
.changes__copy-all-changes-button:hover {
background-color: var(--changes-button-copy-all-background-color--hover);
.changes__copy-all-changes-button:hover,
.changes__copy-all-changes-button:focus {
background-color: var(--theme-button-background);
}
.changes__copy-all-changes-button:active {
background-color: var(--changes-button-copy-all-background-color--active);
background-color: var(--theme-button-active-background);
}
/* Hide the Copy Rule button by default. */
@ -119,7 +113,7 @@
* see-through effect.
*/
background-blend-mode: overlay;
background-color: var(--changes-button-copy-rule-background-color);
background-color: var(--theme-button-background);
background-image:
linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
border-radius: 8px;
@ -133,7 +127,7 @@
}
.changes__copy-rule-button:active {
background-color: var(--changes-button-copy-rule-background-color--active);
background-color: var(--theme-button-active-background);
}
.changes__rule {

12
devtools/client/themes/variables.css
Просмотреть файл

@ -30,6 +30,10 @@
--theme-toolbar-hover: var(--grey-20);
--theme-toolbar-hover-active: var(--grey-20);
/* Buttons */
--theme-button-background: rgba(12, 12, 13, 0.05);
--theme-button-active-background: rgba(12, 12, 13, 0.1);
/* Selection */
--theme-selection-background: var(--blue-55);
--theme-selection-background-hover: #F0F9FE;
@ -119,6 +123,10 @@
--theme-toolbar-hover: #252526;
--theme-toolbar-hover-active: #252526;
/* Buttons */
--theme-button-background: rgba(249, 249, 250, 0.1);
--theme-button-active-background: rgba(249, 249, 250, 0.15);
/* Selection */
--theme-selection-background: #204E8A;
--theme-selection-background-hover: #353B48;
@ -245,8 +253,6 @@
--yellow-80: #715100;
--grey-10: #f9f9fa;
--grey-10-a10: rgba(249, 249, 250, 0.1);
--grey-10-a15: rgba(249, 249, 250, 0.15);
--grey-20: #ededf0;
--grey-25: #e0e0e2;
--grey-30: #d7d7db;
@ -259,6 +265,4 @@
--grey-80: #2a2a2e;
--grey-85: #1b1b1d;
--grey-90: #0c0c0d;
--grey-90-a05: rgba(12, 12, 13, 0.05);
--grey-90-a10: rgba(12, 12, 13, 0.1);
}