Andrew's git - newtab.git/blob

   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#edit, #addcol {
  96  position: absolute;
  97  right: 0;
  98  bottom: 0;
  99  background-color: var(--hover-bg);
 100  width: 29px;
 101  height: 29px;
 102  padding: 0;
 103  display: flex;
 104  justify-content: center;
 105  align-items: center;
 106  cursor: pointer;
 107}
 108
 109#edit:hover {
 110  background-color: var(--hover-bg-2);
 111}
 112
 113#addcol {
 114  display: none;
 115  right: 29px;
 116}
 117
 118#addcol:hover {
 119  background-color: var(--hover-grn);
 120}
 121
 122.add, .rmcol {
 123  background-color: var(--hover-bg);
 124  margin-top: 14px;
 125  width: 29px;
 126  height: 29px;
 127  padding: 0;
 128  justify-content: center;
 129  align-items: center;
 130  float: right;
 131  display: none;
 132  cursor: pointer;
 133}
 134
 135.add:hover {
 136  background-color: var(--hover-grn) !important;
 137}
 138
 139.rmcol {
 140  display: flex;
 141}
 142
 143.rmcol:hover {
 144  background-color: var(--remove-bg) !important;
 145}
 146
 147.new {
 148  background-color: var(--hover-bg);
 149}
 150
 151.title:hover > .add {
 152  display: flex;
 153}
 154
 155.title p:hover {
 156  cursor: move;
 157}
 158
 159.title:hover .add:not(:hover),
 160li:hover > .remove:not(:hover) {
 161  display: flex;
 162  background-color: var(--hover-bg);
 163}
 164
 165li:hover > a, li > a:focus, li > a:focus-within {
 166  display: inline-block;
 167  background-color: var(--hover-bg);
 168}
 169
 170li:hover {
 171  background-color: var(--hover-bg);
 172}
 173
 174a {
 175  color: inherit;
 176  outline: none;
 177  display: block;
 178  text-decoration: none;
 179  padding: 0.5rem;
 180  height: 19px;
 181}
 182
 183.remove:not(:hover) {
 184  display: none;
 185}
 186
 187a, ul > .title > p {
 188  width: calc(100% - 45px);
 189  display: inline-block;
 190}
 191
 192li.sortable-chosen.sortable-ghost {
 193  background-color: var(--hover-bg-2);
 194}
 195
 196.over {
 197 /* border: 2px dashed var(--default-fg);*/
 198}
 199
 200.glyphicon-move {
 201  cursor: move;
 202  cursor: -webkit-grabbing;
 203}
 204
 205.title {
 206  margin-bottom: 0.5rem;
 207  font-weight: bold;
 208  text-align: left;
 209  border-bottom: 1px solid var(--hover-bg);
 210}
 211
 212.title p {
 213  width: 160px;
 214  margin-left: 0.5rem;
 215  margin-bottom: 0.5rem !important;
 216}