SidebarItem.css (1778B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .sidebar-item { 6 color: var(--sidebar-text-color); 7 border-radius: var(--border-radius-xsmall); 8 padding-inline-end: var(--category-padding); 9 padding-inline-start: var(--category-padding); 10 transition: background-color var(--category-transition-duration); 11 user-select: none; 12 } 13 14 .sidebar-item--tall { 15 height: var(--category-height); 16 } 17 18 .sidebar-item--condensed { 19 height: calc(var(--base-unit) * 9); 20 } 21 22 .sidebar-item__link { 23 display: block; 24 height: 100%; 25 } 26 27 .sidebar-item__link, 28 .sidebar-item__link:hover { 29 color: inherit; /* do not apply usual link colors, but grab this element parent's */ 30 } 31 32 .sidebar-item:not(.sidebar-item--selectable) { 33 color: var(--secondary-text-color); 34 } 35 36 .sidebar-item--selectable:hover { 37 background-color: var(--sidebar-background-hover); 38 } 39 40 .sidebar-item--selected { 41 color: var(--sidebar-selected-color); 42 } 43 44 .sidebar-item--breathe { 45 margin-block-start: calc(6 * var(--base-unit)); 46 margin-block-end: calc(2 * var(--base-unit)); 47 } 48 49 @media (prefers-contrast) { 50 /* Color transitions (black <-> white) look bad in high contrast */ 51 .sidebar-item { 52 transition: background 0s; 53 } 54 55 .sidebar-item--selected, 56 .sidebar-item--selected:hover { 57 background-color: ButtonText; 58 } 59 60 /* `color: inherit` should not be used in high contrast mode 61 otherwise the link inherits the <a> color from ua.css */ 62 .sidebar-item__link, 63 .sidebar-item__link:hover { 64 color: ButtonText; 65 } 66 67 .sidebar-item--selected .sidebar-item__link, 68 .sidebar-item--selected .sidebar-item__link:hover { 69 color: ButtonFace; 70 } 71 }