Bug 1388761 - Update category styling in common.css. r=dao

MozReview-Commit-ID: DfDvzw5zVZ8

--HG--
extra : rebase_source : 9ac1070359e11fe2a36b55c65dfd6d5ede6d820a
This commit is contained in:
Tim Nguyen 2017-08-09 20:13:42 +00:00
Родитель 8b3a0e7bc2
Коммит f28112f57c
6 изменённых файлов: 36 добавлений и 59 удалений

Просмотреть файл

@ -115,25 +115,12 @@ caption > label {
#categories {
max-height: 100vh;
background-color: #fafafc;
}
#categories > scrollbox {
overflow-x: hidden !important;
}
.category-name {
font-size: 1.45rem;
}
.category,
.category:hover,
.category[selected] {
background-color: transparent;
border-inline-start: initial;
padding-inline-start: 44px;
}
/**
* We want the last category to always have non-0 getBoundingClientRect().bottom
* so we can use the value to figure out the max-height of the list in

Просмотреть файл

@ -1,6 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="#fbfbfb">
<path d="M12,17c0.5,0,1-0.5,1-1v-4c0,0,0.2-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8 c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2c-1.1,0-1.2,0.8-1.8,0.8C13.2,8.8,13,8,13,8V6c0-0.6-0.4-1-1-1H9c0,0-0.8-0.1-0.8-0.8 S9,3.6,9,2.5C9,1.9,8.8,1,7,1S5,1.9,5,2.5c0,1.1,0.8,1.2,0.8,1.8S5,5,5,5H2C1.4,5,1,5.4,1,6l0,2.5c0,0-0.1,1.5,1.1,1.5 c0.8,0,0.9-1,1.9-1c0.5,0,1,0.5,1,1.6c0,1-0.5,1.6-1,1.6c-1,0-1.1-1-1.9-1C0.9,11,1,12.5,1,12.5L1,16c0,0.6,0.4,1,1,1h3.9 c0,0,1.5,0.1,1.5-1.1c0-0.8-1-0.9-1-1.9c0-0.5,0.7-1.2,1.8-1.2s1.9,0.7,1.9,1.2c0,1-1,1.1-1,1.9c0,1.2,1.5,1.1,1.5,1.1H12z" />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" d="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"></path>
</svg>

До

Ширина:  |  Высота:  |  Размер: 874 B

После

Ширина:  |  Высота:  |  Размер: 899 B

Просмотреть файл

@ -1,3 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z" fill="white"/>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="context-fill" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
</svg>

До

Ширина:  |  Высота:  |  Размер: 308 B

После

Ширина:  |  Высота:  |  Размер: 401 B

Просмотреть файл

@ -1,7 +1,7 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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/. -->
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fbfbfb">
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill">
<path d="M14.6,6.1L13.5,5l0,0c0.1-0.1,0.2-0.4,0.2-0.6c0-0.2-0.1-0.4-0.2-0.6l-0.4-0.4c-0.3-0.3-0.8-0.3-1.1,0l0,0
L10.5,2c-0.2-0.2-0.3-0.2-0.5-0.2c-0.2,0-0.3,0.1-0.5,0.2L8.3,3.2C8.1,3.3,8.1,3.4,8.1,3.6S8.2,4,8.3,4.1l1.6,1.6L7.8,7.8L5.6,5.7
l1.5-1.5C7.3,4,7.4,3.8,7.4,3.6c0-0.2-0.1-0.4-0.2-0.6l-1-1C5.8,1.7,5.3,1.7,5,2L0.9,6.1C0.7,6.3,0.6,6.5,0.6,6.7

До

Ширина:  |  Высота:  |  Размер: 963 B

После

Ширина:  |  Высота:  |  Размер: 948 B

Просмотреть файл

@ -11,7 +11,6 @@
#nav-header {
min-height: 39px;
background-color: #424f5a;
}
.view-pane > .list > scrollbox {
@ -39,7 +38,7 @@
#detail-view .global-warning {
padding: 4px 12px;
border-bottom: 1px solid #c1c1c1;
border-bottom: 1px solid var(--in-content-border-color);
}
@media (max-width: 600px) {
@ -113,8 +112,8 @@
.alert {
-moz-box-align: center;
padding: 10px;
color: #333;
border: 1px solid #c1c1c1;
color: var(--in-content-text-color);
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
background-color: #ebebeb;
}
@ -154,7 +153,7 @@ button.warning {
}
.category[selected="true"]:hover {
background-color:#1A2533;
color: #0060df;
}
.category[disabled] {
@ -249,14 +248,14 @@ button.warning {
.view-header {
margin: 0 48px;
border-bottom: 1px solid #c1c1c1;
border-bottom: 1px solid var(--in-content-box-border-color);
}
#header-utils-btn {
height: 30px;
line-height: 20px;
border-color: #c1c1c1;
background-color: #fbfbfb;
border-color: var(--in-content-box-border-color);
background-color: var(--in-content-page-background);
padding-right: 10px;
padding-left: 10px;
}
@ -335,7 +334,7 @@ button.warning {
.sorter[checkState="1"],
.sorter[checkState="2"] {
background-color: #ebebeb;
box-shadow: 0 -4px 0 0 #ff9500 inset;
box-shadow: 0 -4px 0 0 var(--in-content-border-highlight) inset;
}
.sorter .button-icon {
@ -391,12 +390,12 @@ button.warning {
}
.list:-moz-focusring > scrollbox > .scrollbox-innerbox {
border-color: #0095dd;
border-color: var(--in-content-border-focus);
}
.addon {
color: #444;
border-bottom: 1px solid #c1c1c1;
border-bottom: 1px solid var(--in-content-box-border-color);
padding: 5px;
background-origin: border-box;
}
@ -622,10 +621,10 @@ button.warning {
}
.addon[selected] {
background-color: #fafafa;
color: #333;
background-color: var(--in-content-page-background);
color: var(--in-content-page-color);
padding-inline-start: 1px; /* compensate the 4px border */
border-inline-start: solid 4px #ff9500;
border-inline-start: solid 4px var(--in-content-border-focus);
}
#addon-list .addon[active="false"] > .content-container > .content-inner-container {
@ -803,9 +802,9 @@ button.warning {
#detail-contrib-btn {
color: #FFF;
text-shadow: none;
border: 1px solid #0095dd;
border: 1px solid transparent;
list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
background-color: #0095dd;
background-color: var(--in-content-primary-button-background);
}
#detail-contrib-btn .button-icon {
@ -813,13 +812,11 @@ button.warning {
}
#detail-contrib-btn:not(:active):hover {
border-color: #008acb;
background-color: #008acb;
background-color: var(--in-content-primary-button-background-hover);
}
#detail-contrib-btn:active:hover {
background-color: #006b9d;
border-color: #006b9d;
background-color: var(--in-content-primary-button-background-active);
}
#detail-grid {
@ -840,7 +837,7 @@ setting[first-row="true"] {
.detail-row,
.detail-row-complex,
setting {
border-top: 1px solid #c1c1c1;
border-top: 1px solid var(--in-content-box-border-color);
-moz-box-align: center;
min-height: 35px;
line-height: 20px;
@ -906,7 +903,7 @@ setting[type="radio"] > radiogroup {
/*** download progress ***/
.download-progress {
border: 1px solid #c1c1c1;
border: 1px solid var(--in-content-box-border-color);
border-radius: 2px;
background-color: #fbfbfb;
width: 200px;
@ -915,7 +912,7 @@ setting[type="radio"] > radiogroup {
}
.download-progress[mode="undetermined"] {
border-color: #0095dd;
border-color: var(--in-content-border-highlight);
}
.download-progress .start-cap,
@ -923,7 +920,7 @@ setting[type="radio"] > radiogroup {
.download-progress[mode="undetermined"] .end-cap,
.download-progress .progress .progress-bar {
-moz-appearance: none;
background-color: #0095dd;
background-color: var(--in-content-border-highlight);
}
.download-progress .progress .progress-bar {

Просмотреть файл

@ -7,9 +7,9 @@
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
*|*:root {
--in-content-page-color: #424e5a;
--in-content-page-background: #fbfbfb;
--in-content-text-color: #333;
--in-content-page-color: #0c0c0d;
--in-content-page-background: #fafafc;
--in-content-text-color: #0c0c0d;
--in-content-selected-text: #fff;
--in-content-header-border-color: #c8c8c8;
--in-content-box-background: #fff;
@ -19,15 +19,11 @@
--in-content-box-border-color: #c1c1c1;
--in-content-item-hover: rgba(0,149,221,0.25);
--in-content-item-selected: #0a84ff;
--in-content-border-highlight: #ff9500;
--in-content-border-highlight: #0a84ff;
--in-content-border-focus: #0a84ff;
--in-content-border-color: #c1c1c1;
--in-content-category-text: #0c0c0d;
--in-content-category-border-focus: 1px dotted #fff;
--in-content-category-text-selected: #0a84ff;
--in-content-category-background: #424f5a;
--in-content-category-background-hover: #5e6972;
--in-content-category-background-active: #343f48;
--in-content-tab-color: #424f5a;
--in-content-link-color: #0a84ff;
--in-content-link-color-hover: #0060df;
@ -647,22 +643,16 @@ xul|*.radio-label-box {
-moz-appearance: none;
color: var(--in-content-category-text);
border-inline-end-width: 0;
padding-inline-start: 15px;
padding-inline-start: 40px;
padding-inline-end: 21px;
min-height: 40px;
transition: background-color 150ms;
}
*|*.category:hover {
background-color: var(--in-content-category-background-hover);
}
*|*.category[selected],
*|*.category.selected {
background-color: var(--in-content-category-background-active);
color: var(--in-content-category-text-selected);
padding-inline-start: 11px; /* compensate the 4px border */
border-inline-start: solid 4px var(--in-content-border-highlight);
background: none;
}
*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
@ -672,7 +662,7 @@ xul|*.radio-label-box {
*|*.category-name {
line-height: 22px;
font-size: 1.25rem;
font-size: 1.45rem;
padding-bottom: 2px;
padding-inline-start: 9px;
margin: 0;