EarlyBlue/communicator/skin/splitter.css

   1 /******* Splitters *******/
   2
   3 splitter {
   4   border: none;
   5    cursor: e-resize;
   6    min-width: 10px;
   7    min-height: 10px;
   8 }
   9
  10 splitter[state="dragging"]
  11 {
  12    background-color: gray;
  13 }
  14
  15 grippy {
  16         margin: 0px;
  17         border: 1px outset #CCD0DD;
  18         padding: 0px;
  19         background-color: #CCCCCC;
  20         background-image: url("chrome://global/skin/grippy-vertical-before.gif");
  21         background-repeat: no-repeat;
  22         background-position: 50% 50%;
  23         cursor: pointer;
  24 }
  25
  26 splitter[state="collapsed"] > grippy
  27   {
  28     background-image      : url("chrome://global/skin/grippy-vertical-after.gif");
  29   }
  30
  31 grippy:hover
  32   {
  33     background-color      : #99CCFF;
  34   }
  35
  36 grippy:hover:active{
  37         background-color: #99CCFF;
  38 }
  39
  40 vbox > splitter > grippy,
  41 box[orient="vertical"] > splitter > grippy,
  42 window[orient="vertical"] > splitter > grippy {
  43         /* a horizontal splitter */
  44         background-image: url("chrome://global/skin/grippy-horizontal-after.gif");
  45         width: 120px;
  46         height:8px;
  47  }
  48
  49 vbox > splitter[state="collapsed"] > grippy,
  50 box[orient="vertical"] > splitter[state="collapsed"] > grippy,
  51 window[orient="vertical"] > splitter[state="collapsed"] > grippy {
  52         background-image: url("chrome://global/skin/grippy-horizontal-before.gif");
  53  }
  54
  55 window > splitter > grippy,
  56 hbox > splitter > grippy,
  57 box > splitter > grippy {
  58         /* a vertical splitter */
  59         width: 8px;
  60         height: 120px;
  61 }
  62
  63 vbox > splitter,
  64 box[orient="vertical"] > splitter,
  65 window[orient="vertical"] > splitter,
  66 rows > splitter {
  67         /* a vertical splitter */
  68         cursor: n-resize;
  69 }
  70
  71 /* for backwards compatibility */
  72 box[align="vertical"]>splitter > grippy,
  73 window[align="vertical"]>splitter > grippy {
  74         /* a horizontal splitter */
  75         background-image: url("chrome://global/skin/grippy-horizontal-after.gif");
  76         width: 120px;
  77         height: 8px;
  78 }
  79
  80 box[align="vertical"]>splitter[state="collapsed"] > grippy,
  81 window[align="vertical"]>splitter[state="collapsed"] > grippy {
  82         background-image: url("chrome://global/skin/grippy-horizontal-before.gif");
  83 }
  84
  85 box[align="vertical"]>splitter,
  86 window[align="vertical"]>splitter {
  87         /* a vertical splitter */
  88     cursor: n-resize;
  89 }
  90
  91 /**
  92  * gray horizontal splitter for pane views
  93  */
  94 splitter.gray-horizontal-splitter {
  95         min-height: 8px;
  96         background-color: #CCD0DD;
  97         border: none;
  98         border-top: 1px solid #9999CC;
  99         border-bottom: 1px solid #9999CC;
 100         padding: 0px;
 101 }
 102
 103 splitter.gray-horizontal-splitter > grippy {
 104         margin: 0px;
 105         border: 1px outset #CCD0DD;
 106         padding: 0px;
 107         background-color: #CCCCCC;
 108         background-image: url("chrome://global/skin/grippy-horizontal-after.gif");
 109 }
 110
 111 splitter.gray-horizontal-splitter[state="collapsed"] > grippy {
 112         background-image: url("chrome://global/skin/grippy-horizontal-before.gif");
 113 }
 114
 115 splitter.gray-horizontal-splitter > grippy:hover {
 116         background-color: #99CCFF;
 117 }
 118
 119 splitter.gray-horizontal-splitter > grippy:active {
 120         border: 1px inset #CCD0DD;
 121         background-color: #99CCFF;
 122 }
 123
 124 /*
 125 splitter.gray-horizontal-splitter > #begincap {
 126         min-width: 8px;
 127         width: 8px;
 128         background-image: url("chrome://global/skin/gray-bottomleft.gif");
 129         background-repeat: no-repeat;
 130         background-position: 0% 100%;
 131 }
 132
 133 splitter.gray-horizontal-splitter > #endcap {
 134         min-width: 8px;
 135         width: 8px;
 136 }
 137 */
 138