EarlyBlue/chatzilla/chatzilla.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 @import url("chrome://communicator/skin/");
   6
   7 window {
   8   width: 640px;
   9   height: 480px;
  10 }
  11
  12 #menu-view-none {
  13   display: none;
  14 }
  15
  16 #header-url:hover {
  17   text-decoration: underline;
  18 }
  19
  20 #outer-box {
  21   margin: 5px;
  22 }
  23
  24 .toolbarbutton-menu-dropmarker {
  25   margin-left: 0.5em;
  26 }
  27
  28 #input-widget,
  29 #input-widget-multiline {
  30   border: 1px inset #CCD0DD;
  31 }
  32
  33 #button-multiline-expand {
  34   list-style-image:url("chrome://chatzilla/skin/images/multiline-expand.png");
  35 }
  36
  37 #button-multiline-contract {
  38   list-style-image:url("chrome://chatzilla/skin/images/multiline-contract.png");
  39 }
  40
  41 #button-input {
  42   list-style-image:url("chrome://chatzilla/skin/images/input-send.png");
  43 }
  44
  45 .highlight-menu-item:hover {
  46   color: #000000 !important;
  47   background: #336699 !important;
  48 }
  49
  50 #user-list {
  51   margin: 0;
  52 }
  53
  54 #view-tabs {
  55   overflow: hidden;
  56 }
  57
  58 #views-tbar-spacer {
  59   -moz-box-flex: 10000;
  60 }
  61
  62 #tabs-drop-indicator-bar {
  63   position: relative;
  64   margin-top: -3px;
  65   -moz-margin-start: -5px;
  66   height: 3px;
  67 }
  68
  69 #tabs-drop-indicator {
  70   position: relative;
  71   margin-bottom: -8px;
  72   width: 11px;
  73   height: 11px;
  74   background: url("chrome://chatzilla/skin/images/drop-indicator-bottom.png") 50% 50% no-repeat;
  75 }
  76
  77 .view-button {
  78   /* Box model is 5px 5px 5px 6px in aggregate. Extra pixel on the left is for the separator. */
  79   -moz-appearance: none;
  80   margin: 5px 0;
  81   border: none;
  82 /*  border-left: 1px solid ButtonShadow;*/
  83   padding: 0 5px;
  84 /*
  85   background: Button;
  86   color: ButtonText;
  87   font: message-box;
  88 */
  89   text-shadow: none;
  90   text-align: center;
  91   max-width: 30ex;
  92   -moz-box-flex: 1;
  93   -moz-box-orient: vertical;
  94   -moz-box-align: stretch;
  95 }
  96
  97 .view-button:first-child {
  98   border-left-color: transparent;
  99 }
 100
 101 .view-button::before {
 102   content: " ";
 103   display: -moz-box;
 104   margin: -5px -5px 0 -5px;
 105   height: 4px;
 106 }
 107
 108 .view-button[state="superfluous"]::before {
 109   background-color: #666699;
 110 }
 111
 112 .view-button[state="activity"]::before {
 113   background-color: #336699;
 114 }
 115
 116 .view-button[state="attention"]::before {
 117   background-color: red;
 118 }
 119
 120 .view-button:hover,
 121 .view-button[state="current"] {
 122   margin: 0 0 0 1px;
 123   border-left: none;
 124   border-radius: 0 0 6px 6px;
 125   padding: 5px;
 126 /*
 127   background: Window;
 128   color: WindowText;
 129 */
 130 }
 131
 132 .view-button[state="current"] + .view-button,
 133 .view-button:hover + .view-button:not([state="current"]) {
 134   border-left-color: transparent;
 135 }
 136
 137 .view-button[state="current"] {
 138   position: relative; /* So it visually appears above the tabs either side. */
 139 /*  border: 2px solid ButtonShadow;*/
 140   border-top: none;
 141   padding: 5px 3px 3px 3px;
 142 }
 143
 144 treecol {
 145   border: none;
 146 }
 147
 148 /* we need to define both the : and :: versions of the treechildren selector
 149  *  so that we work on both 1.5 and pre 1.5 builds.
 150  *
 151  * The userlist can be in one of two state.  In "symbol", the user's
 152  * channel mode is shown as a @ or + image, while in "graphic" mode, the
 153  * image is one of the LED images.
 154  */
 155
 156 /* no mode */
 157 treechildren::-moz-tree-image {
 158   list-style-image: url("chrome://chatzilla/skin/images/no-symbol.png");
 159 }
 160
 161 #user-list[mode="graphic"] treechildren::-moz-tree-image {
 162   list-style-image: url("chrome://chatzilla/skin/images/no-graphic.png");
 163 }
 164
 165 /* voice */
 166 treechildren::-moz-tree-image(voice-true) {
 167   list-style-image: url("chrome://chatzilla/skin/images/voice-symbol.png");
 168 }
 169
 170 #user-list[mode="graphic"] treechildren::-moz-tree-image(voice-true) {
 171   list-style-image: url("chrome://chatzilla/skin/images/voice-graphic.png");
 172 }
 173
 174 /* half-chanop */
 175 treechildren::-moz-tree-image(halfop-true) {
 176   list-style-image: url("chrome://chatzilla/skin/images/halfop-symbol.png");
 177 }
 178
 179 #user-list[mode="graphic"] treechildren::-moz-tree-image(halfop-true) {
 180   list-style-image: url("chrome://chatzilla/skin/images/halfop-graphic.png");
 181 }
 182
 183 /* chanop */
 184 treechildren::-moz-tree-image(op-true) {
 185   list-style-image: url("chrome://chatzilla/skin/images/op-symbol.png");
 186 }
 187
 188 #user-list[mode="graphic"] treechildren::-moz-tree-image(op-true) {
 189   list-style-image: url("chrome://chatzilla/skin/images/op-graphic.png");
 190 }
 191
 192 /* admin */
 193 treechildren::-moz-tree-image(admin-true) {
 194   list-style-image: url("chrome://chatzilla/skin/images/admin-symbol.png");
 195 }
 196
 197 #user-list[mode="graphic"] treechildren::-moz-tree-image(admin-true) {
 198   list-style-image: url("chrome://chatzilla/skin/images/admin-graphic.png");
 199 }
 200
 201 /* founder */
 202 treechildren::-moz-tree-image(founder-true) {
 203   list-style-image: url("chrome://chatzilla/skin/images/founder-symbol.png");
 204 }
 205
 206 #user-list[mode="graphic"] treechildren::-moz-tree-image(founder-true) {
 207   list-style-image: url("chrome://chatzilla/skin/images/founder-graphic.png");
 208 }
 209
 210 /* away */
 211 treechildren::-moz-tree-cell-text(away-true) {
 212   color: #808080;
 213   font-style: italic;
 214 }
 215
 216 treechildren::-moz-tree-cell-text(away-false) {
 217 }
 218
 219 menuitem[header="true"] {
 220   text-align: center;
 221 }
 222
 223 .colorGrid
 224 {
 225   width: 24px;
 226   height: 16px;
 227   border: 1px solid #000000;
 228   -moz-box-align: center;
 229   -moz-box-pack: center;
 230 }
 231
 232 #colorTooltip
 233 {
 234   padding: 0px;
 235   -moz-box-align: center;
 236   -moz-box-pack: center;
 237 }
 238
 239 /* Feel the hacks. */
 240 progressmeter[mode="undetermined"] {
 241   -moz-appearance: none;
 242 }
 243
 244 [dir="ltr"] {
 245   direction: ltr;
 246 }
 247
 248 [dir="rtl"] {
 249   direction: rtl;
 250 }
 251
 252 #input-splitter {
 253   margin: 4px 0 0 0;
 254 }
 255
 256 #input-widgets {
 257   margin: 4px 0;
 258 }
 259
 260 #server-nick, #button-multiline-expand, #button-input, #button-multiline-contract {
 261   margin: 0;
 262 }
 263
 264 #input, #multiline-input {
 265   margin: 0 4px;
 266 }
 267
 268 /* Hack; Stop the status-bar from distorting without a security icon */
 269 #status-text {
 270   min-height: 17px;
 271 }
 272
 273 #status-text[notice="true"] {
 274   font-weight: bold;
 275 }
 276
 277 #security-button {
 278   min-width: 20px;
 279 }
 280
 281 #security-button:not([level="high"]):not([level="broken"]) {
 282   display: none;
 283 }
 284
 285 #security-button[level="high"] > image {
 286   list-style-image: url("chrome://communicator/skin/icons/lock-secure.gif");
 287 }
 288
 289 #security-button[level="broken"] > image {
 290   list-style-image: url("chrome://communicator/skin/icons/lock-broken.gif");
 291 }
 292
 293 /* prevent margins of a value-less label from shifting the image */
 294 #security-button > label:not([value]) {
 295   display: none;
 296 }
 297
 298 #alert-status[alertstate="off"] {
 299     list-style-image: url("chrome://chatzilla/skin/images/spbubble-off.png");
 300 }
 301
 302 #alert-status[alertstate="on"] {
 303     list-style-image: url("chrome://chatzilla/skin/images/spbubble-on.png");
 304 }
 305
 306 #logging-status[loggingstate="off"] {
 307     list-style-image: url("chrome://chatzilla/skin/images/logging-off.png");
 308 }
 309
 310 #logging-status[loggingstate="on"] {
 311     list-style-image: url("chrome://chatzilla/skin/images/logging-on.png");
 312 }
 313
 314 #offline-status[offlinestate="offline"] {
 315   list-style-image: url("chrome://communicator/skin/icons/offline.gif");
 316 }
 317
 318 #offline-status[offlinestate="online"] {
 319   list-style-image: url("chrome://communicator/skin/icons/online.gif");
 320 }
 321
 322 /* Focus styling for a11y reasons */
 323 #user-list-box[focusobvious="true"], #browser-box[focusobvious="true"],
 324 #multiline-hug-box[focusobvious="true"], #singleline-hug-box[focusobvious="true"] {
 325   outline: 2px solid #336699;
 326 }