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