card-container.css (3507B)
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 .card-container { 6 padding: 8px; 7 border-radius: var(--border-radius-medium); 8 background-color: var(--fxview-background-color-secondary); 9 margin-block-end: 24px; 10 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); 11 @media (prefers-contrast) { 12 border: 1px solid var(--fxview-border); 13 } 14 15 &[isOpenTabsView] { 16 margin-block-end: 0; 17 } 18 19 &[open]::details-content { 20 display: contents; 21 } 22 } 23 24 .card-container-header { 25 display: inline-flex; 26 gap: 14px; 27 width: 100%; 28 align-items: center; 29 cursor: pointer; 30 border-radius: var(--border-radius-xsmall); 31 outline-offset: 4px; 32 padding: 6px; 33 padding-inline-end: 0; 34 margin-block-end: 6px; 35 height: 24px; 36 } 37 38 .card-container-header[withViewAll] { 39 width: 83%; 40 } 41 42 .card-container-header[hidden] { 43 display: none; 44 } 45 46 .card-container-header[toggleDisabled] { 47 cursor: auto; 48 } 49 50 .view-all-link { 51 color: var(--fxview-primary-action-background); 52 float: inline-end; 53 outline-offset: 6px; 54 border-radius: var(--border-radius-xsmall); 55 width: 12%; 56 text-align: end; 57 padding: 6px; 58 padding-inline-start: 0; 59 } 60 61 .card-container-header:focus-visible, 62 .view-all-link:focus-visible { 63 outline: var(--focus-outline); 64 } 65 66 .chevron-icon { 67 background-image: url("chrome://global/skin/icons/arrow-up.svg"); 68 padding: 2px; 69 display: inline-block; 70 justify-self: start; 71 fill: currentColor; 72 margin-block: 0; 73 width: 16px; 74 height: 16px; 75 background-position: center; 76 -moz-context-properties: fill; 77 border: none; 78 background-color: transparent; 79 background-repeat: no-repeat; 80 border-radius: var(--border-radius-small); 81 } 82 83 .chevron-icon:hover { 84 background-color: var(--fxview-element-background-hover); 85 } 86 87 @media (forced-colors) { 88 .chevron-icon { 89 border: 1px solid ButtonText; 90 color: ButtonText; 91 } 92 93 .chevron-icon:hover { 94 border: 1px solid SelectedItem; 95 color: SelectedItem; 96 } 97 98 .chevron-icon:active { 99 color: SelectedItem; 100 } 101 102 .chevron-icon, 103 .chevron-icon:hover, 104 .chevron-icon:active { 105 background-color: ButtonFace; 106 } 107 } 108 109 .card-container:not([open]) .chevron-icon { 110 background-image: url("chrome://global/skin/icons/arrow-down.svg"); 111 } 112 113 .card-container:not([open]) a { 114 display: none; 115 } 116 117 ::slotted([slot="header"]), 118 ::slotted([slot="secondary-header"]) { 119 align-self: center; 120 margin: 0; 121 font-size: 1.13em; 122 font-weight: var(--heading-font-weight); 123 overflow: hidden; 124 text-overflow: ellipsis; 125 user-select: none; 126 white-space: nowrap; 127 } 128 129 ::slotted([slot="header"]) { 130 flex: 1; 131 width: 0; 132 } 133 134 ::slotted([slot="secondary-header"]) { 135 padding-inline-end: 1em; 136 } 137 138 .card-container-footer { 139 display: flex; 140 justify-content: center; 141 color: var(--fxview-primary-action-background); 142 cursor: pointer; 143 } 144 145 ::slotted([slot="footer"]:not([hidden])) { 146 text-decoration: underline; 147 display: inline-block; 148 outline-offset: 2px; 149 border-radius: var(--border-radius-xsmall); 150 margin-block: 0.5rem; 151 } 152 153 @media (max-width: 39rem) { 154 .card-container-header[withViewAll] { 155 width: 76%; 156 } 157 .view-all-link { 158 width: 20%; 159 } 160 } 161 162 .card-container.inner { 163 border: 1px solid var(--fxview-border); 164 box-shadow: none; 165 margin-block: 8px 0; 166 } 167 168 details.empty-state { 169 box-shadow: none; 170 border: 1px solid var(--fxview-border); 171 border-radius: var(--border-radius-medium); 172 }