devtools/client/themes/splitview.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 .theme-dark {
   6   --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
   7   --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
   8 }
   9 .theme-light {
  10   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
  11   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
  12 }
  13
  14 box,
  15 .splitview-nav {
  16   flex: 1;
  17   flex-direction: column;
  18   min-width: 0;
  19   min-height: 0;
  20 }
  21
  22 .splitview-nav {
  23   list-style: none;
  24   padding: 0;
  25   margin: 0;
  26   background-color: var(--theme-sidebar-background);
  27
  28   display: flex;
  29   overflow-x: hidden;
  30   overflow-y: auto;
  31 }
  32
  33 .splitview-nav > li {
  34   padding-inline-end: 8px;
  35   align-items: center;
  36   outline: 0;
  37   vertical-align: bottom;
  38   border-bottom: 1px solid var(--theme-splitter-color);
  39 }
  40
  41 .placeholder {
  42   flex: 1;
  43   text-align: center;
  44 }
  45
  46 .splitview-nav > li.splitview-active {
  47   background-color: var(--theme-selection-background);
  48   color: var(--theme-selection-color);
  49   background-image: var(--sidemenu-selected-arrow);
  50   background-repeat: no-repeat;
  51   background-position: center right;
  52 }
  53
  54 .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
  55   background-image: var(--sidemenu-selected-arrow-rtl);
  56   background-position: center left;
  57 }
  58
  59 .splitview-nav > li:not(.splitview-active):where(:hover, :focus-within) {
  60   background-color: var(--theme-selection-background-hover);
  61 }
  62
  63 /* Toolbars */
  64
  65 .splitview-main > .devtools-toolbar {
  66   height: 29px;
  67 }
  68
  69 .splitview-main > toolbar,
  70 .loading .splitview-nav-container {
  71   border-inline-end: 1px solid var(--theme-splitter-color);
  72 }
  73
  74 .splitview-nav-container {
  75   justify-content: center;
  76 }
  77
  78 .loading .splitview-nav-container > .placeholder {
  79   display: none !important;
  80 }
  81
  82 .splitview-controller,
  83 .splitview-main {
  84   flex: none;
  85 }
  86
  87 .splitview-controller {
  88   min-height: 3em;
  89   max-height: 14em;
  90   max-width: 400px;
  91   min-width: 200px;
  92 }
  93
  94 .splitview-side-details > * {
  95   display: none;
  96   min-width: 0;
  97   min-height: 0;
  98 }
  99
 100 /* only the active details pane is shown */
 101 .splitview-side-details > .splitview-active {
 102   display: flex;
 103 }
 104
 105 /* filtered items are hidden */
 106 ol.splitview-nav > li.splitview-filtered {
 107   display: none;
 108 }
 109
 110 /* "empty list" and "all filtered" placeholders are hidden */
 111 .splitview-nav:empty,
 112 .splitview-nav.splitview-all-filtered,
 113 .splitview-nav + .splitview-nav.placeholder {
 114   display: none;
 115 }
 116 .splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
 117 .splitview-nav:empty ~ .splitview-nav.placeholder.empty {
 118   display: flex;
 119 }
 120
 121 @media (width >= 700px) {
 122   .splitview-root {
 123     flex-direction: row;
 124   }
 125   .splitview-controller {
 126     max-height: none;
 127     /* Override the potential splitter-set height */
 128     height: auto !important;
 129   }
 130   .splitview-details {
 131     display: none;
 132   }
 133   .splitview-details.splitview-active {
 134     display: flex;
 135   }
 136 }
 137
 138 /* portrait mode */
 139 @media (width < 700px) {
 140   .splitview-controller {
 141     max-width: none;
 142     /* Override the potential splitter-set width */
 143     width: auto !important;
 144   }
 145 }