зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1388761 - Update category styling in common.css. r=dao
MozReview-Commit-ID: DfDvzw5zVZ8 --HG-- extra : rebase_source : 9ac1070359e11fe2a36b55c65dfd6d5ede6d820a
This commit is contained in:
Родитель
8b3a0e7bc2
Коммит
f28112f57c
|
@ -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;
|
||||
|
|
Загрузка…
Ссылка в новой задаче