tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

Accordion.css (2693B)

      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 /* Accordion */
      6 
      7 .accordion {
      8  width: 100%;
      9  padding: 0;
     10  margin: 0;
     11  list-style-type: none;
     12  /* Accordion root has tabindex="-1" to get focus programatically.
     13   * This can give it a focus outline when clicked, which we don't want.
     14   * The container itself is not in the focus order at all. */
     15  outline: none;
     16  background-color: var(--theme-sidebar-background);
     17 }
     18 
     19 .accordion-header {
     20  box-sizing: border-box;
     21  display: flex;
     22  align-items: center;
     23  /* Reserve 1px for the border */
     24  min-height: calc(var(--theme-toolbar-height) + 1px);
     25  margin: 0;
     26  border-bottom: 1px solid var(--theme-splitter-color);
     27  padding: 2px 4px;
     28  font-size: inherit;
     29  font-weight: normal;
     30  user-select: none;
     31  cursor: default;
     32  background-color: var(--theme-accordion-header-background);
     33  color: var(--theme-accordion-header-color);
     34  /* Adjust outline to make it visible */
     35  outline-offset: -2px;
     36 
     37  &:hover {
     38    background-color: var(--theme-accordion-header-hover-background);
     39 
     40    & .accordion-header-label {
     41      color: var(--theme-accordion-header-hover-color);
     42    }
     43  }
     44 }
     45 
     46 .accordion-header .accordion-toggle {
     47  appearance: none;
     48  background: none;
     49  border: none;
     50  flex: 1 1 0;
     51  display: flex;
     52  align-items: center;
     53  /* UA stylesheet gives button element an inline padding that we don't want here */
     54  padding: 0;
     55 }
     56 
     57 /*
     58  Arrow should be a bit closer to the text than to the start edge:
     59  - total distance between text and start edge = 20px
     60  - arrow width = 10px
     61  - distance between arrow and start edge = 6px
     62  - distance between arrow and text = 4px
     63 */
     64 .accordion-header .theme-twisty {
     65  display: inline-block;
     66  flex: none;
     67  width: 10px;
     68  height: 10px;
     69  margin-inline-start: 2px;
     70  margin-inline-end: 4px;
     71  pointer-events: none;
     72 }
     73 
     74 :root[forced-colors-active] .accordion-header:hover .theme-twisty {
     75  fill: var(--theme-accordion-header-hover-color);
     76 }
     77 
     78 .accordion-header-label {
     79  display: block;
     80  white-space: nowrap;
     81  overflow: hidden;
     82  text-overflow: ellipsis;
     83  font-size: 12px;
     84  line-height: 16px;
     85  color: var(--theme-toolbar-color);
     86 }
     87 
     88 .accordion-header-buttons {
     89  flex: none;
     90  display: flex;
     91  align-items: center;
     92  justify-content: flex-end;
     93  max-width: 50%;
     94  margin-inline-start: auto;
     95  padding-inline-start: 4px;
     96 }
     97 
     98 .accordion-content {
     99  overflow: auto;
    100  border-bottom: 1px solid var(--theme-splitter-color);
    101 }
    102 
    103 .accordion-content[hidden] {
    104  display: none;
    105 }
    106 
    107 .accordion-item:last-child > .accordion-content {
    108  border-bottom: none;
    109 }