LCARStrek/browser/readinglist/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 readinglist.inc.css === */
   6
   7 :root, body {
   8   overflow-x: hidden;
   9 }
  10
  11 body {
  12   margin: 0;
  13   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  14   background-color: #000000;
  15   color: #FF9F00;
  16   -moz-user-select: none;
  17   overflow: hidden;
  18 }
  19
  20 #emptyListInfo {
  21   cursor: default;
  22   padding: 3em 1em;
  23   text-align: center;
  24 }
  25
  26 .item {
  27   display: flex;
  28   flex-flow: row;
  29   cursor: pointer;
  30   padding: 6px;
  31   opacity: 0;
  32   max-height: 0;
  33   transition: opacity 150ms ease-in-out, max-height 150ms ease-in-out 150ms;
  34 }
  35
  36 .item.active {
  37   background: #A09090;
  38   color: #000000;
  39 }
  40
  41 .item.selected {
  42   background: #008484;
  43   color: #000000;
  44 }
  45
  46 .item:hover {
  47   background: #FFCF00;
  48   color: #000000;
  49 }
  50
  51 .item-thumb-container {
  52   min-width: 64px;
  53   max-width: 64px;
  54   min-height: 40px;
  55   max-height: 40px;
  56   border: 1px solid white;
  57   box-shadow: 0px 1px 2px rgba(0,0,0,.35);
  58   margin: 5px;
  59   background-color: #A09090;
  60   background-size: contain;
  61   background-repeat: no-repeat;
  62   background-position: center;
  63   background-image: url("chrome://branding/content/silhouette-40.svg");
  64 }
  65
  66 .item-thumb-container.preview-available {
  67   background-color: #fff;
  68   background-size: cover;
  69 }
  70
  71 .item-summary-container {
  72   display: flex;
  73   flex-flow: column;
  74   -moz-padding-start: 4px;
  75   overflow: hidden;
  76   flex-grow: 1;
  77 }
  78
  79 .item-title-lines {
  80   display: flex;
  81 }
  82
  83 .item-title {
  84   overflow: hidden;
  85   max-height: 2.8em;
  86   line-height: 1.4;
  87   flex-grow: 1;
  88 }
  89
  90 .item-domain {
  91   overflow: hidden;
  92   text-overflow: ellipsis;
  93   white-space: nowrap;
  94   max-height: 1.4em;
  95   color: #3333FF;
  96 }
  97
  98 .item:hover .item-domain {
  99   color: #000000;
 100 }
 101
 102 .item:not(:hover):not(.selected) .remove-button {
 103   visibility: hidden;
 104 }
 105
 106 .remove-button {
 107   padding: 0;
 108   -moz-margin-end: 2px;
 109   border-radius: 3px;
 110   width: 16px;
 111   height: 16px;
 112   background-size: contain;
 113   background-color: transparent;
 114   border-width: 0;
 115 }
 116
 117 .item.visible {
 118   opacity: 1;
 119   max-height: 80px;
 120   transition: max-height 250ms ease-in-out, opacity 250ms ease-in-out 250ms;
 121 }
 122
 123 /* === END readinglist.inc.css === */
 124
 125 .item {
 126   -moz-padding-end: 0;
 127 }
 128
 129 .item-title {
 130   margin: 1px 0 0;
 131 }
 132
 133 .item-title, .item-domain {
 134   -moz-margin-end: 6px;
 135 }
 136
 137 .remove-button {
 138   background-color: #000000;
 139   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 16, 16, 0);
 140 }
 141
 142 .remove-button:hover {
 143   background-color: #FFCF00;
 144   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
 145 }
 146
 147 .remove-button:hover:active {
 148   background-color: #FF9F00;
 149   background-image: -moz-image-rect(url("chrome://global/skin/icons/close.png"), 0, 32, 16, 16);
 150 }