LCARStrek/browser/syncedtabs/sidebar.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 /* === BEGIN sidebar.inc.css === */
   6
   7 /* These styles are intended to mimic XUL trees and the XUL search box. */
   8
   9 html {
  10   height: 100%;
  11 }
  12
  13 body {
  14   height: 100%;
  15   margin: 0;
  16   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  17   color: #FF9F00;
  18   -moz-user-select: none;
  19 }
  20
  21 /* The content-container holds the non-scrollable header and the scrollable
  22    content area.
  23 */
  24 .content-container {
  25   display: flex;
  26   flex-flow: column;
  27   height: 100%;
  28 }
  29
  30 /* The content header is not scrollable */
  31 .content-header {
  32   flex: 0 1 auto;
  33 }
  34
  35 /* The main content area is scrollable and fills the rest of the area */
  36 .content-scrollable {
  37   flex: 1 1 auto;
  38   overflow: auto;
  39 }
  40
  41 .emptyListInfo {
  42   cursor: default;
  43   padding: 3em 1em;
  44   text-align: center;
  45 }
  46
  47 .list,
  48 .item-tabs-list {
  49   display: flex;
  50   flex-flow: column;
  51   flex-grow: 1;
  52 }
  53
  54 .item.client {
  55   opacity: 1;
  56   max-height: unset;
  57   display: unset;
  58 }
  59
  60 .item.client.closed .item-tabs-list {
  61   display: none;
  62 }
  63
  64 .item {
  65   display: inline-block;
  66   opacity: 1;
  67   flex: 1;
  68   min-width: 0;
  69   white-space: nowrap;
  70   overflow: hidden;
  71   outline: none;
  72   color: #FF9F00;
  73 }
  74
  75 .item.selected > .item-title-container {
  76   background-color: #A09090;
  77   color: #000000;
  78   font-weight: bold;
  79 }
  80
  81 .item.selected:focus > .item-title-container {
  82   background-color: #008484;
  83   color: #000000;
  84 }
  85
  86 .client .item.tab > .item-title-container {
  87   padding-inline-start: 35px;
  88 }
  89
  90 .item.tab > .item-title-container {
  91   padding-inline-start: 20px;
  92 }
  93
  94 .item.tab > .item-title-container > .item-icon-container {
  95   background-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
  96 }
  97
  98 @media (min-resolution: 1.1dppx) {
  99 .item.tab > .item-title-container > .item-icon-container {
 100     background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
 101   }
 102 }
 103
 104 .item-icon-container {
 105   min-width: 16px;
 106   max-width: 16px;
 107   min-height: 16px;
 108   max-height: 16px;
 109   margin-right: 5px;
 110   margin-left: 5px;
 111   background-size: 16px 16px;
 112   background-size: contain;
 113   background-repeat: no-repeat;
 114   background-position: center;
 115 }
 116
 117 .item-title-container {
 118   display: flex;
 119   flex-flow: row;
 120   overflow: hidden;
 121   flex-grow: 1;
 122   padding: 1px 0px 1px 0px;
 123 }
 124
 125 .item-title {
 126   flex-grow: 1;
 127   overflow: hidden;
 128   text-overflow: ellipsis;
 129   margin: 0px;
 130   line-height: 1.3;
 131 }
 132
 133 .item[hidden] {
 134   opacity: 0;
 135   max-height: 0;
 136   transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
 137 }
 138
 139 .item.empty .item-title-container {
 140   color: #A09090;
 141 }
 142
 143 .client .item.empty > .item-title-container {
 144   padding-inline-start: 35px;
 145 }
 146
 147 .text-input-box {
 148   display: flex;
 149   flex-flow: row nowrap;
 150 }
 151
 152 .textbox-input-box {
 153   display: flex;
 154   flex-direction: row;
 155 }
 156
 157 .tabsFilter {
 158   flex: 1;
 159   /* min-width of anything to override the implicit "-moz-min-content" value.
 160      0px is safe as the sidebar itself has a constrained size meaning we will
 161      never actually hit this minimum
 162   */
 163   min-width: 0px;
 164 }
 165
 166 .sync-state > p {
 167   padding-inline-end: 10px;
 168   padding-inline-start: 10px;
 169   color: #9C9CFF;
 170 }
 171
 172 .text-link {
 173   color: #336699;
 174   cursor: pointer;
 175 }
 176
 177 .text-link:hover {
 178   text-decoration: underline;
 179 }
 180
 181 .text-link,
 182 .text-link:focus {
 183   margin: 0px;
 184   padding: 0px;
 185   border: 0px;
 186 }
 187
 188 .deck .sync-state {
 189   display: none;
 190   opacity: 0;
 191   transition: opacity 1.5s;
 192   border-top: 1px solid #A09090;
 193 }
 194
 195 .deck .sync-state.tabs-container {
 196   border-top: 0px;
 197 }
 198
 199 .deck .sync-state.selected {
 200   display: unset;
 201   opacity: 100;
 202 }
 203
 204 .sidebar-search-container.tabs-container:not(.selected) {
 205   display: none;
 206 }
 207
 208 .textbox-search-clear:not([disabled]) {
 209   cursor: default;
 210 }
 211
 212 .textbox-search-icons .textbox-search-clear,
 213 .filtered .textbox-search-icons .textbox-search-icon {
 214   display: none;
 215 }
 216
 217 .filtered .textbox-search-icons .textbox-search-clear {
 218   display: block;
 219 }
 220
 221 /* === END sidebar.inc.css === */
 222
 223 /* These styles are intended to mimic XUL trees and the XUL search box. */
 224
 225 html {
 226   background-color: #000000;
 227 }
 228
 229 .item {
 230   -moz-padding-end: 0;
 231 }
 232
 233 .item-title {
 234   margin: 1px 0 0;
 235 }
 236
 237 .item-title {
 238   -moz-margin-end: 6px;
 239 }
 240
 241 .search-box {
 242 /*  -moz-appearance: textfield; */
 243   cursor: text;
 244   margin: 2px 4px;
 245   padding: 2px 2px 3px;
 246   -moz-padding-start: 4px;
 247   color: #E7ADE7;
 248   border: 1px solid #9C9CFF;
 249 }
 250
 251 .textbox-search-icon {
 252   width: 16px;
 253   height: 16px;
 254   background-image: url(chrome://global/skin/icons/search.png);
 255   background-repeat: no-repeat;
 256   display: block;
 257 }
 258
 259 .textbox-search-icon:-moz-locale-dir(rtl) {
 260   transform: scaleX(-1);
 261 }
 262
 263 .textbox-search-icon[searchbutton]:not([disabled]) {
 264   cursor: pointer;
 265 }
 266
 267 .textbox-search-clear {
 268   width: 16px;
 269   height: 16px;
 270   background-image: url(chrome://global/skin/icons/search.png);
 271   background-repeat: no-repeat;
 272   background-position: 0 -16px;
 273 }
 274
 275 .textbox-search-clear:not([disabled]) {
 276   cursor: default;
 277 }
 278
 279 .textbox-search-icon:not([disabled]) {
 280   cursor: text;
 281 }
 282 /*
 283 .textbox-search-clear:not([disabled]):hover ,
 284 .textbox-search-icon:not([disabled]):hover {
 285   background-position: -16px 0;
 286 }
 287
 288 .textbox-search-clear:not([disabled]):hover:active ,
 289 .textbox-search-icon:not([disabled]):hover:active {
 290   background-position: -32px 0;
 291 }
 292 */
 293 .client .item.tab > .item-title-container {
 294   padding-inline-start: 26px;
 295 }
 296 .item.tab > .item-title-container {
 297   padding-inline-start: 14px;
 298 }
 299
 300 .item-icon-container {
 301   min-width: 16px;
 302   max-width: 16px;
 303   min-height: 16px;
 304   max-height: 16px;
 305   margin-right: 5px;
 306   background-size: 16px 16px;
 307   background-repeat: no-repeat;
 308   background-position: center;
 309 }
 310
 311 .item-twisty-container {
 312   background-size: contain;
 313   background-repeat: no-repeat;
 314   background-position: center;
 315   padding-top: 5px;
 316   width: 9px; /* The image's width is 9 pixels */
 317   height: 9px;
 318 }
 319
 320 .item.client .item-twisty-container {
 321   background-image: url("chrome://global/skin/tree/twisty.svg#open");
 322 }
 323
 324 .item.client.closed .item-twisty-container {
 325   background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
 326 }
 327
 328 .item.client .item-twisty-container:hover {
 329   background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
 330 }
 331
 332 .item.client.closed .item-twisty-container:hover {
 333   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
 334 }
 335
 336 .item.client .item-twisty-container:-moz-dir(rtl) {
 337   background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
 338 }
 339
 340 .item.client.closed .item-twisty-container:-moz-dir(rtl) {
 341   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
 342 }
 343
 344 .item.client .item-twisty-container:hover:-moz-dir(rtl) {
 345   background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
 346 }
 347
 348 .item.client.closed .item-twisty-container:hover:-moz-dir(rtl) {
 349   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
 350 }