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