style.csson commit fix event listener bug for items & add buttons (a5b13da)
   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  position: relative;
  33  list-style: none;
  34  padding: 0;
  35  width: 10rem;
  36  margin: 0.5rem 2em 2em 2em;
  37  float: left;
  38}
  39
  40img {
  41  float: left;
  42  margin-top: 1px;
  43  padding-right: 3px;
  44}
  45
  46input {
  47  font-size: 16px !important;
  48  padding: 0;
  49  height: 18.5px;
  50  width: 112px;
  51  margin: 5px;
  52}
  53
  54input.name {
  55  margin-bottom: 2.5px
  56}
  57
  58input.url {
  59  margin-top: 2.5px
  60}
  61
  62input.colname {
  63  width: calc(100% - 68px);
  64  height: 19px;
  65  margin: 14px 0 6px 0;
  66  border: 2px var(--hover-bg) dashed;
  67  background-color: var(--default-bg);
  68  color: inherit;
  69  font-family: inherit;
  70}
  71
  72.remove {
  73  width: 29px;
  74  height: 35px;
  75  padding: 0;
  76  background-color: var(--hover-bg);
  77  float: right;
  78  text-align: center;
  79  justify-content: center;
  80  align-items: center;
  81  cursor: pointer;
  82  font-family: monospace;
  83  display: flex;
  84}
  85
  86.save {
  87  padding-left: 8px;
  88  float: right;
  89  height: 60px;
  90  width: 21px;
  91  display: flex;
  92  text-align: center;
  93  align-items: center;
  94  cursor: pointer;
  95  background-color: var(--hover-bg-2);
  96}
  97
  98.save:hover, .save:focus, .save:focus-within {
  99  background-color: var(--hover-grn);
 100}
 101
 102.remove:hover {
 103  background-color: var(--remove-bg);
 104}
 105
 106#edit, #addcol {
 107  position: absolute;
 108  right: 0;
 109  bottom: 0;
 110  background-color: var(--hover-bg);
 111  width: 29px;
 112  height: 29px;
 113  padding: 0;
 114  display: flex;
 115  justify-content: center;
 116  align-items: center;
 117  cursor: pointer;
 118  font-weight: bold;
 119}
 120
 121#edit:hover {
 122  background-color: var(--hover-bg-2);
 123}
 124
 125#addcol {
 126  display: none;
 127  right: 29px;
 128}
 129
 130#addcol:hover {
 131  background-color: var(--hover-grn);
 132}
 133
 134.add, .rmcol {
 135  background-color: var(--hover-bg);
 136  margin-top: 14px;
 137  width: 29px;
 138  height: 29px;
 139  padding: 0;
 140  justify-content: center;
 141  align-items: center;
 142  float: right;
 143  display: none;
 144  cursor: pointer;
 145}
 146
 147.add:hover {
 148  background-color: var(--hover-grn) !important;
 149}
 150
 151.rmcol {
 152  display: flex;
 153}
 154
 155.rmcol:hover {
 156  background-color: var(--remove-bg) !important;
 157}
 158
 159.new {
 160  background-color: var(--hover-bg);
 161}
 162
 163.title:hover > .add {
 164  display: flex;
 165}
 166
 167.title p:hover {
 168  cursor: move;
 169}
 170
 171.title:hover .add:not(:hover),
 172li:hover > .remove:not(:hover) {
 173  display: flex;
 174  background-color: var(--hover-bg);
 175}
 176
 177li:hover > a, li > a:focus, li > a:focus-within {
 178  display: inline-block;
 179  background-color: var(--hover-bg);
 180}
 181
 182li:hover {
 183  background-color: var(--hover-bg);
 184}
 185
 186a {
 187  color: inherit;
 188  outline: none;
 189  display: block;
 190  text-decoration: none;
 191  padding: 0.5rem;
 192  height: 19px;
 193}
 194
 195.remove:not(:hover) {
 196  display: none;
 197}
 198
 199a, ul > .title > p, .colname {
 200  width: calc(100% - 45px);
 201  display: inline-block;
 202}
 203
 204li.sortable-chosen.sortable-ghost {
 205  background-color: var(--hover-bg-2);
 206}
 207
 208.over {
 209 /* border: 2px dashed var(--default-fg);*/
 210}
 211
 212span.grip {
 213  content: '....';
 214  position: relative;
 215  right: 20px;
 216  top: 35px;
 217  width: 10px;
 218  height: 20px;
 219  display: none;
 220  overflow: hidden;
 221  line-height: 5px;
 222  padding: 3px 4px;
 223  cursor: move;
 224  vertical-align: middle;
 225  font-size: 12px;
 226  font-family: sans-serif;
 227  font-weight: bold;
 228  letter-spacing: 2px;
 229}
 230
 231span.grip::after {
 232  content: '.. .. .. ..';
 233}
 234
 235.glyphicon-move {
 236  cursor: move;
 237  cursor: -webkit-grabbing;
 238}
 239
 240.title {
 241  margin-bottom: 0.5rem;
 242  font-weight: bold;
 243  text-align: left;
 244  border-bottom: 1px solid var(--hover-bg);
 245}
 246
 247.title p {
 248  width: 160px;
 249  margin: 16px 0 8px 0;
 250}