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