Andrew's git - newtab.git/blob

   1html, body {
   2  font-size: 16px !important;
   3  width: 100%;
   4  height: 100%;
   5}
   6
   7body {
   8  margin: 0;
   9  color: #D8DEE9;
  10  display: flex;
  11  flex-direction: column;
  12  align-items: center;
  13  justify-content: center;
  14}
  15
  16.favorites {
  17  display: flex;
  18  flex-direction: row;
  19  display: -webkit-flex;
  20  -webkit-flex-direction: row;
  21}
  22
  23ul {
  24  list-style: none;
  25  padding: 0;
  26  width: 10rem;
  27  margin: 0.5rem 2em 2em 2em;
  28}
  29
  30img {
  31  float: left;
  32  margin-top: 1px;
  33  padding-right: 3px;
  34}
  35
  36input {
  37  font-size: 16px !important;
  38  padding: 0;
  39  height: 18.5px;
  40  width: 112px;
  41  margin: 5px;
  42}
  43
  44input.name {
  45  margin-bottom: 2.5px
  46}
  47
  48input.url {
  49  margin-top: 2.5px
  50}
  51
  52.remove {
  53/*  width: 9px;
  54  height: 29px;
  55  padding: 6px 10px 0 10px;*/
  56  width: 29px;
  57  height: 35px;
  58  padding: 0;
  59  background: #434C5E;
  60  float: right;
  61  text-align: center;
  62  justify-content: center;
  63  align-items: center;
  64  cursor: pointer;
  65  font-family: monospace;
  66  display: flex;
  67}
  68
  69.save {
  70  padding-left: 8px;
  71  float: right;
  72  height: 60px;
  73  width: 21px;
  74  display: flex;
  75  text-align: center;
  76  align-items: center;
  77  cursor: pointer;
  78}
  79
  80.save:hover, .save:focus, .save:focus-within {
  81  background: #A3BE8C;
  82}
  83
  84.remove:hover {
  85  background: #BF616A;
  86}
  87
  88.add {
  89  background-color: #434C5E;
  90  margin-top: 14px;
  91  width: 29px;
  92  height: 29px;
  93  padding: 0;
  94  justify-content: center;
  95  align-items: center;
  96  float: right;
  97  display: none;
  98  cursor: pointer;
  99}
 100
 101.add:hover {
 102  background-color: #A3BE8C !important;
 103}
 104
 105.title:hover > .add {
 106  display: flex;
 107}
 108
 109.title:hover .add:not(:hover),
 110li:hover > .remove:not(:hover) {
 111  display: flex;
 112  background-color: #434c5e;
 113}
 114
 115li:hover > a, li > a:focus, li > a:focus-within {
 116  display: inline-block;
 117  background-color: #434c5e;
 118}
 119
 120li:hover {
 121  background-color: #434c5e;
 122}
 123
 124a {
 125  color: inherit;
 126  outline: none;
 127  display: block;
 128  text-decoration: none;
 129  padding: 0.5rem;
 130  height: 19px;
 131}
 132
 133.remove:not(:hover) {
 134  display: none;
 135}
 136
 137a, ul > .title > p {
 138  width: calc(100% - 45px);
 139  display: inline-block;
 140}
 141
 142li.sortable-chosen.sortable-ghost > a {
 143  background-color: white;
 144  color: #2A313B !important;
 145}
 146
 147.title {
 148  margin-bottom: 0.5rem;
 149  font-weight: bold;
 150  text-align: left;
 151  border-bottom: 1px solid #434C5E;
 152}
 153
 154.title p {
 155  width: 160px;
 156  margin-left: 0.5rem;
 157  margin-bottom: 0.5rem !important;
 158}