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