LCARStrek/devtools/splitters.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 /* This file is loaded by both browser.xul and toolbox.xul. Therefore, rules
   6    defined here can not rely on toolbox.xul variables. */
   7
   8 /* Splitters */
   9
  10 :root {
  11   /* Define the widths of the draggable areas on each side of a splitter. top
  12      and bottom widths are used for horizontal splitters, inline-start and
  13      inline-end for side splitters.*/
  14
  15   --devtools-splitter-top-width: 2px;
  16   --devtools-splitter-bottom-width: 2px;
  17
  18   /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
  19   --devtools-splitter-inline-start-width: 1px;
  20   --devtools-splitter-inline-end-width: 4px;
  21 }
  22
  23 :root[devtoolstheme="light"],
  24 :root[devtoolstheme="dark"],
  25 :root[devtoolstheme="firebug"] {
  26   /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
  27   --devtools-splitter-color: #9C9CFF;
  28 }
  29
  30 .devtools-horizontal-splitter,
  31 .devtools-side-splitter {
  32   -moz-appearance: none;
  33   background-image: none;
  34   border: 0;
  35   border-style: solid;
  36   border-color: transparent;
  37   background-color: var(--devtools-splitter-color);
  38   background-clip: content-box;
  39   position: relative;
  40
  41   box-sizing: border-box;
  42
  43   /* Positive z-index positions the splitter on top of its siblings and makes
  44      it clickable on both sides. */
  45   z-index: 1;
  46 }
  47
  48 .devtools-horizontal-splitter {
  49   min-height: calc(var(--devtools-splitter-top-width) +
  50     var(--devtools-splitter-bottom-width) + 1px);
  51
  52   border-top-width: var(--devtools-splitter-top-width);
  53   border-bottom-width: var(--devtools-splitter-bottom-width);
  54
  55   margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
  56   margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
  57
  58   cursor: n-resize;
  59 }
  60
  61 .devtools-side-splitter {
  62   min-width: calc(var(--devtools-splitter-inline-start-width) +
  63     var(--devtools-splitter-inline-end-width) + 1px);
  64
  65   border-inline-start-width: var(--devtools-splitter-inline-start-width);
  66   border-inline-end-width: var(--devtools-splitter-inline-end-width);
  67
  68   margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
  69   margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
  70
  71   cursor: e-resize;
  72 }
  73
  74 .devtools-horizontal-splitter.disabled,
  75 .devtools-side-splitter.disabled {
  76   pointer-events: none;
  77 }