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.client.device-image-desktop.selected > .item-title-container > .item-icon-container {
  95   background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon-inverted");
  96 }
  97
  98 .item.client.device-image-desktop:not(.selected) > .item-title-container > .item-icon-container,
  99 .item.client.device-image-desktop.selected > .item-title-container > .item-icon-container:-moz-window-inactive {
 100   background-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon");
 101 }
 102
 103 .item.client.device-image-mobile.selected > .item-title-container > .item-icon-container {
 104   background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon-inverted");
 105 }
 106
 107 .item.client.device-image-mobile:not(.selected) > .item-title-container > .item-icon-container,
 108 .item.client.device-image-mobile.selected > .item-title-container > .item-icon-container:-moz-window-inactive {
 109   background-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon");
 110 }
 111
 112 .item.tab > .item-title-container > .item-icon-container {
 113   background-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 114 }
 115
 116 @media (min-resolution: 1.1dppx) {
 117 .item.tab > .item-title-container > .item-icon-container {
 118     background-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
 119   }
 120 }
 121
 122 .item-icon-container {
 123   min-width: 16px;
 124   max-width: 16px;
 125   min-height: 16px;
 126   max-height: 16px;
 127   margin-right: 5px;
 128   margin-left: 5px;
 129   background-size: 16px 16px;
 130   background-size: contain;
 131   background-repeat: no-repeat;
 132   background-position: center;
 133 }
 134
 135 .item-title-container {
 136   display: flex;
 137   flex-flow: row;
 138   overflow: hidden;
 139   flex-grow: 1;
 140   padding: 1px 0px 1px 0px;
 141 }
 142
 143 .item-title {
 144   flex-grow: 1;
 145   overflow: hidden;
 146   text-overflow: ellipsis;
 147   margin: 0px;
 148   line-height: 1.3;
 149   cursor: default;
 150 }
 151
 152 .item[hidden] {
 153   opacity: 0;
 154   max-height: 0;
 155   transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
 156 }
 157
 158 .item.empty .item-title-container {
 159   color: #A09090;
 160 }
 161
 162 .client .item.empty > .item-title-container {
 163   padding-inline-start: 35px;
 164 }
 165
 166 .text-input-box {
 167   display: flex;
 168   flex-flow: row nowrap;
 169 }
 170
 171 .textbox-input-box {
 172   display: flex;
 173   flex-direction: row;
 174 }
 175
 176 .tabsFilter {
 177   flex: 1;
 178   /* min-width of anything to override the implicit "-moz-min-content" value.
 179      0px is safe as the sidebar itself has a constrained size meaning we will
 180      never actually hit this minimum
 181   */
 182   min-width: 0px;
 183 }
 184
 185 .sync-state > p {
 186   padding-inline-end: 10px;
 187   padding-inline-start: 10px;
 188   color: #9C9CFF;
 189 }
 190
 191 .text-link {
 192   color: #336699;
 193   cursor: pointer;
 194 }
 195
 196 .text-link:hover {
 197   text-decoration: underline;
 198 }
 199
 200 .text-link,
 201 .text-link:focus {
 202   margin: 0px;
 203   padding: 0px;
 204   border: 0px;
 205 }
 206
 207 .deck .sync-state {
 208   display: none;
 209   opacity: 0;
 210   transition: opacity 1.5s;
 211   border-top: 1px solid #A09090;
 212 }
 213
 214 .deck .sync-state.tabs-container {
 215   border-top: 0px;
 216 }
 217
 218 .deck .sync-state.selected {
 219   display: unset;
 220   opacity: 100;
 221 }
 222
 223 .sidebar-search-container.tabs-container:not(.selected) {
 224   display: none;
 225 }
 226
 227 .textbox-search-clear:not([disabled]) {
 228   cursor: default;
 229 }
 230
 231 .textbox-search-icons .textbox-search-clear,
 232 .filtered .textbox-search-icons .textbox-search-icon {
 233   display: none;
 234 }
 235
 236 .filtered .textbox-search-icons .textbox-search-clear {
 237   display: block;
 238 }
 239
 240 /* === END sidebar.inc.css === */
 241
 242 /* These styles are intended to mimic XUL trees and the XUL search box. */
 243
 244 html {
 245   background-color: #000000;
 246 }
 247
 248 .item {
 249   padding-inline-end: 0;
 250 }
 251
 252 .item-title {
 253   margin: 1px 0 0;
 254 }
 255
 256 .item-title {
 257   margin-inline-end: 6px;
 258 }
 259
 260 .search-box {
 261 /*  -moz-appearance: textfield; */
 262   cursor: text;
 263   margin: 2px 4px;
 264   padding: 2px 2px 3px;
 265   padding-inline-start: 4px;
 266   color: #E7ADE7;
 267   border: 1px solid #9C9CFF;
 268 }
 269
 270 .textbox-search-icon {
 271   width: 16px;
 272   height: 16px;
 273   background-image: url(chrome://global/skin/icons/search.png);
 274   background-repeat: no-repeat;
 275   display: block;
 276 }
 277
 278 .textbox-search-icon:-moz-locale-dir(rtl) {
 279   transform: scaleX(-1);
 280 }
 281
 282 .textbox-search-icon[searchbutton]:not([disabled]) {
 283   cursor: pointer;
 284 }
 285
 286 .textbox-search-clear {
 287   width: 16px;
 288   height: 16px;
 289   background-image: url(chrome://global/skin/icons/search.png);
 290   background-repeat: no-repeat;
 291   background-position: 0 -16px;
 292 }
 293
 294 .textbox-search-clear:not([disabled]) {
 295   cursor: default;
 296 }
 297
 298 .textbox-search-icon:not([disabled]) {
 299   cursor: text;
 300 }
 301 /*
 302 .textbox-search-clear:not([disabled]):hover ,
 303 .textbox-search-icon:not([disabled]):hover {
 304   background-position: -16px 0;
 305 }
 306
 307 .textbox-search-clear:not([disabled]):hover:active ,
 308 .textbox-search-icon:not([disabled]):hover:active {
 309   background-position: -32px 0;
 310 }
 311 */
 312 .client .item.tab > .item-title-container {
 313   padding-inline-start: 26px;
 314 }
 315 .item.tab > .item-title-container {
 316   padding-inline-start: 14px;
 317 }
 318
 319 .item-icon-container {
 320   min-width: 16px;
 321   max-width: 16px;
 322   min-height: 16px;
 323   max-height: 16px;
 324   margin-right: 5px;
 325   background-size: 16px 16px;
 326   background-repeat: no-repeat;
 327   background-position: center;
 328 }
 329
 330 .item-twisty-container {
 331   background-size: contain;
 332   background-repeat: no-repeat;
 333   background-position: center;
 334   padding-top: 5px;
 335   max-width: 9px; /* The image's width is 9 pixels */
 336   height: 9px;
 337 }
 338
 339 .item.client .item-twisty-container {
 340   background-image: url("chrome://global/skin/tree/twisty.svg#open");
 341 }
 342
 343 .item.client.closed .item-twisty-container {
 344   background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
 345 }
 346
 347 .item.client .item-twisty-container:hover {
 348   background-image: url("chrome://global/skin/tree/twisty.svg#open-hover");
 349 }
 350
 351 .item.client.closed .item-twisty-container:hover {
 352   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover");
 353 }
 354
 355 .item.client .item-twisty-container:dir(rtl) {
 356   background-image: url("chrome://global/skin/tree/twisty.svg#open-rtl");
 357 }
 358
 359 .item.client.closed .item-twisty-container:dir(rtl) {
 360   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-rtl");
 361 }
 362
 363 .item.client .item-twisty-container:hover:dir(rtl) {
 364   background-image: url("chrome://global/skin/tree/twisty.svg#open-hover-rtl");
 365 }
 366
 367 .item.client.closed .item-twisty-container:hover:dir(rtl) {
 368   background-image: url("chrome://global/skin/tree/twisty.svg#clsd-hover-rtl");
 369 }