toolkit/themes/shared/tree.css

   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 /* ===== tree.css ===================================================
   6   == Styles used by the XUL tree element.
   7   ======================================================================= */
   8
   9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  10 @namespace html url("http://www.w3.org/1999/xhtml");
  11
  12 /* ::::: tree ::::: */
  13
  14 tree {
  15   margin: 0 4px;
  16   background-color: Field;
  17   color: FieldText;
  18   appearance: auto;
  19   -moz-default-appearance: listbox;
  20   @media (-moz-platform: linux) {
  21     appearance: none;
  22     border: 1px solid ThreeDShadow;
  23   }
  24 }
  25
  26 /* ::::: tree rows ::::: */
  27
  28 treechildren::-moz-tree-row {
  29   border: 1px solid transparent;
  30 }
  31
  32 treechildren::-moz-tree-row,
  33 treecol:not([hideheader="true"]),
  34 .tree-columnpicker-button {
  35   min-height: max(24px, 1.3em);
  36 }
  37
  38 treechildren::-moz-tree-row(multicol, odd) {
  39   background-color: -moz-oddtreerow;
  40 }
  41
  42 @media not (prefers-contrast) {
  43   treechildren::-moz-tree-row(hover) {
  44     background-color: hsla(0,0%,50%,.15);
  45   }
  46 }
  47
  48 treechildren::-moz-tree-row(selected) {
  49   background-color: -moz-cellhighlight;
  50 }
  51
  52 treechildren::-moz-tree-row(selected, focus) {
  53   background-color: SelectedItem;
  54 }
  55
  56 treechildren::-moz-tree-row(current, focus) {
  57   outline: var(--default-focusring);
  58   outline-color: SelectedItem;
  59   outline-offset: calc(-1 * var(--default-focusring-width));
  60 }
  61
  62 treechildren::-moz-tree-row(selected, current, focus) {
  63   outline-color: #F3D982;
  64 }
  65
  66 /* ::::: tree cells ::::: */
  67
  68 treechildren::-moz-tree-cell {
  69   padding: 0 2px;
  70 }
  71
  72 treechildren::-moz-tree-cell-text {
  73   color: inherit;
  74 }
  75
  76 treechildren::-moz-tree-image(selected),
  77 treechildren::-moz-tree-twisty(selected),
  78 treechildren::-moz-tree-cell-text(selected) {
  79   color: -moz-cellhighlighttext;
  80 }
  81
  82 treechildren::-moz-tree-image(selected, focus),
  83 treechildren::-moz-tree-twisty(selected, focus),
  84 treechildren::-moz-tree-cell-text(selected, focus) {
  85   color: SelectedItemText;
  86 }
  87
  88
  89 /* ::::: lines connecting cells ::::: */
  90
  91 treechildren::-moz-tree-line {
  92   border: 1px dotted ThreeDShadow;
  93 }
  94
  95 treechildren::-moz-tree-line(selected, focus) {
  96   border: 1px dotted SelectedItemText;
  97 }
  98
  99
 100 /* ::::: tree separator ::::: */
 101
 102 treechildren::-moz-tree-separator {
 103   border-top: 1px solid ThreeDShadow;
 104   border-bottom: 1px solid ThreeDHighlight;
 105 }
 106
 107
 108 /* ::::: drop feedback ::::: */
 109
 110 treechildren::-moz-tree-cell-text(primary, dropOn) {
 111   background-color: SelectedItem;
 112   color: SelectedItemText;
 113 }
 114
 115 treechildren::-moz-tree-drop-feedback {
 116   background-color: SelectedItem;
 117   width: 50px;
 118   height: 2px;
 119   margin-inline-start: 5px;
 120 }
 121
 122 /* ::::: tree columns ::::: */
 123
 124 treecol,
 125 .tree-columnpicker-button {
 126   appearance: auto;
 127   -moz-default-appearance: treeheadercell;
 128   background-color: -moz-ColHeader;
 129   color: -moz-ColHeaderText;
 130   align-items: center;
 131   justify-content: center;
 132   padding: 0 4px;
 133   margin: 0;
 134   border-inline-start: 1px solid ThreeDLightShadow;
 135
 136   @media (-moz-platform: linux) or ((-moz-platform: windows) and (prefers-color-scheme: dark)) {
 137     appearance: none;
 138     box-shadow: inset 0 -1px ThreeDLightShadow;
 139   }
 140
 141   &:where(:hover) {
 142     background-color: -moz-ColHeaderHover;
 143     color: -moz-ColHeaderHoverText;
 144   }
 145   &:where(:hover:active) {
 146     background-color: -moz-ColHeaderActive;
 147     color: -moz-ColHeaderActiveText;
 148   }
 149 }
 150
 151 .treecol-text {
 152   margin: 0 !important;
 153 }
 154
 155 treecol:where([ordinal="1"]) {
 156   border-inline-start: none;
 157 }
 158
 159 treecol[hideheader="true"] {
 160   appearance: none;
 161 }
 162
 163 /* ::::: column drag and drop styles ::::: */
 164
 165 treecol[dragging="true"] {
 166   color: Graytext;
 167 }
 168
 169 treechildren::-moz-tree-column(insertbefore) {
 170   border-inline-start: 1px solid ThreeDShadow;
 171 }
 172
 173 treechildren::-moz-tree-column(insertafter) {
 174   border-inline-end: 1px solid ThreeDShadow;
 175 }
 176
 177 /* ::::: column picker :::::  */
 178
 179 .tree-columnpicker-button {
 180   list-style-image: url("chrome://global/skin/icons/columnpicker.svg");
 181   -moz-context-properties: fill;
 182   fill: currentColor;
 183   min-width: 0;
 184   padding: 1px 0;
 185 }
 186
 187 .tree-columnpicker-button .button-text {
 188   display: none;
 189 }
 190
 191 /* ::::: tree icons ::::: */
 192
 193 treechildren::-moz-tree-image {
 194   -moz-context-properties: fill;
 195   fill: currentColor;
 196 }
 197
 198 /* ::::: twisty :::::  */
 199
 200 treechildren::-moz-tree-twisty {
 201   padding-top: 1px;
 202   padding-inline: 4px;
 203   width: 12px; /* The image's width is 12 pixels */
 204   list-style-image: url("chrome://global/skin/icons/arrow-right-12.svg");
 205   -moz-context-properties: fill;
 206   fill: currentColor;
 207 }
 208
 209 treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
 210   list-style-image: url("chrome://global/skin/icons/arrow-left-12.svg");
 211 }
 212
 213 treechildren::-moz-tree-twisty(open) {
 214   list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
 215 }
 216
 217 treechildren::-moz-tree-indentation {
 218   width: 16px;
 219 }
 220
 221 /* ::::: editable tree ::::: */
 222
 223 treechildren::-moz-tree-row(selected, editing) {
 224   background-color: transparent;
 225   border: none;
 226 }
 227
 228 treechildren::-moz-tree-cell-text(selected, editing),
 229 treechildren::-moz-tree-image(selected, editing) {
 230   color: inherit;
 231 }
 232
 233 html|input.tree-input {
 234   position: absolute;
 235   top: 0;
 236   left: 0;
 237   appearance: none;
 238   flex: 1;
 239   border: 0;
 240   border-radius: 2px;
 241   outline: var(--focus-outline);
 242   margin-block: -1px 0;
 243   margin-inline: -2px 0;
 244   padding: 1px;
 245   font: inherit;
 246 }
 247
 248 .scrollbar-topmost {
 249   position: relative;
 250   z-index: 2147483647;
 251 }
 252
 253 @media not (-moz-platform: macos) {
 254   /* ::::: sort direction indicator :::::  */
 255   .treecol-sortdirection {
 256     list-style-image: url("chrome://global/skin/tree/sort-asc.svg");
 257     -moz-context-properties: fill;
 258     fill: currentColor;
 259     visibility: hidden;
 260
 261     treecol[sortDirection="ascending"]:not([hideheader="true"]) > & {
 262       visibility: inherit;
 263     }
 264
 265     treecol[sortDirection="descending"]:not([hideheader="true"]) > & {
 266       visibility: inherit;
 267       list-style-image: url("chrome://global/skin/tree/sort-dsc.svg");
 268     }
 269   }
 270 }
 271
 272 @media (-moz-platform: macos) and (not (prefers-contrast)) {
 273     /* We show a `SelectedItem` background on selected rows, so we do not need the
 274        dotted outline in that case. For users who have Full Keyboard Access
 275        enabled, macOS draws a blue highlight above the row highlight, so keyboard-
 276        only users can still discern the currently-selected row when multiple rows
 277        are selected. */
 278   treechildren::-moz-tree-row(selected, current, focus) {
 279     outline: none;
 280   }
 281 }